1. 定义:事件在n秒后触发,不管在这个时间节点中执行多少次事件,只有最后一次事件是触发  
  3. 对比场景:游戏中的回城 DNF中的抬*
  5. 使用场景：
  6. - 上拉刷新,下来加载--scroll事件
  7. - resize
  8. - 文本的输入验证(连续输入文字后发送Ajax请求进行验证,验证一次就够了)

1-1 原生JavaScript-button实现防抖

  1. <body>
  2.     <!-- 什么叫函数防抖：事件n秒后触发,不管在这个时间段中执行多少次事件,该事件只针对
  3.     最后一次触发 -->
  4.     <button id="btn">函数防抖</button>
  5.     <script>
  6.         var btn = document.getElementById("btn");
  7.         var timer;
  8.         btn.onclick = function(){
  9.             if(timer){
  10.                 clearTimeout(timer);
  11.             }
  12.             timer =  setTimeout(()=>{
  13.                 console.log("loading");
  14.                 timer = null
  15.             },500)
  16.         }
  17.         /*
  18.         3s 
  19.          */
  20.     </script>
  21. </body>

1-2 input实现防抖

  1. <body>
  2.     <input type="text" id="input">
  3.     <script>
  4.         var input = document.getElementById("input");
  5.         var timer;
  6.         input.addEventListener("keyup",()=>{
  7.             if(timer){
  8.                 clearTimeout(timer);
  9.             }
  10.             timer = setTimeout(()=>{
  11.                 console.log(input.value)
  12.                 timer = null;
  13.             },1000)
  14.         })
  15.     </script>
  16. </body>

1-3 封装防抖

  1. <body>
  2.     <input type="text" id="input">
  3.     <script>
  4.         var input = document.getElementById("input");
  5.         var timer
  7.         /* 封装防抖函数 */
  8.         function debounce(fn,delay=500){
  9.             if(timer){
  10.                 clearTimeout(timer);
  11.             }
  12.             timer = setTimeout(fn,delay)
  13.         }
  14.         input.addEventListener("keyup",()=>{
  15.             debounce(()=>{
  16.                 console.log(input.value);
  17.             })
  18.         })
  19.     </script>
  20. </body>

1-4 闭包封装防抖

  1. <body>
  2.     <input type="text" id="input">
  3.     <script>
  4.         var input = document.getElementById("input");
  5.         input.addEventListener("keyup",debounce(()=>{
  6.             console.log(input.value);
  7.         }))
  8.         /* 闭包 1、返回值是一个函数  2、返回函数使用返回函数外面定义的局部变量 
  9.         闭包好处:不会造成全局的污染
  10.         */
  11.       function debounce(fn,delay=500){
  12.           let timer = null;
  13.           return function(){
  14.               if(timer){
  15.                   clearTimeout(timer);
  16.               }
  17.               timer = setTimeout(fn,delay);
  18.           }
  19.       }
  20.     </script>
  21. </body>

1-5 apply

  1. <body>
  2.     <input type="text" id="input">
  3.     <script>
  4.         var input = document.getElementById("input");
  5.         input.addEventListener("keyup",debounce(function(){
  6.             console.log(this.value)
  7.         }))
  8.         /* 闭包 1、返回值是一个函数  2、返回函数使用返回函数外面定义的局部变量 
  9.         闭包好处:不会造成全局的污染
  10.         */
  11.       function debounce(fn,delay=500){
  12.           let timer = null;
  13.           return function(){
  14.               console.log(this)
  15.               if(timer){
  16.                   clearTimeout(timer);
  17.               }
  18.               timer = setTimeout(()=>{
  19.                   console.log(this)
  20.                   fn.call(this);
  21.               },delay);
  22.           }
  23.       }
  24.       /* function才能使用call,apply */
  25.     </script>
  26. </body>