定义:事件在n秒后触发,不管在这个时间节点中执行多少次事件,只有最后一次事件是触发
对比场景:游戏中的回城 DNF中的抬枪
使用场景:

  1. - 上拉刷新,下来加载--scroll事件
  2. - resize
  3. - 文本的输入验证(连续输入文字后发送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.         })
  22.     </script>
  23. </body>


1-4 闭包封装防抖

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

1-5 apply

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