概念

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如滚动、输入等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数,防抖和节流是比较好的解决方案。
(1)所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。使用场景:注册的时候检查用户名是否已经被注册.
(2)所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。使用场景:监听滚动条是否到了顶部或底部.

(一) 防抖例子

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="UTF-8">
  4. </head>
  5. <body>
  6.     用户名: <input onblur="checkUsername" placeholder="请输入用户名" id="username" />
  8.     <script>
  9.         // 1.定义一个timer定时器
  10.         var timer;
  11.         // 2.获取input节点
  12.         var $username = document.getElementById('username');
  13.         // 3.绑定input事件
  14.         $username.addEventListener('input', function() {
  15.             // 4.每次输入都会清除定时器,所以连续输入,定时器是不会触发,触发,除非停止输入超过1秒定时器才会执行
  16.             clearTimeout(timer);
  17.             timer = setTimeout(function() {
  18.                 console.log('发请求到后台,检查用户是否已注册');
  19.             }, 1000)
  20.         }, false)
  21.     </script>
  22. </body>

封装函数

  1. // 上面例子中的函数,一般单独写出来,给它命名为debounce
  3. var $username = document.getElementById("username");
  4. $username.addEventListener("input", debounce, false);
  6. var timer; 
  7. function debounce() { 
  8.   clearTimeout(timer);
  9.   timer = setTimeout(function() {
  10.     console.log("发请求到后台,检查用户是否已注册");
  11.   }, 1000);
  12. }

(二) 节流例子

  1. <!DOCTYPE html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <style>
  6.         p {height: 100px}
  7.     </style>
  8. </head>
  10. <body>
  11.     <div id="box">
  12.         <p>ppppppppppppppppp</p>
  13.         <p>ppppppppppppppppp</p>
  14.         <p>ppppppppppppppppp</p>
  15.         <p>ppppppppppppppppp</p>
  16.         <p>ppppppppppppppppp</p>
  17.         <p>ppppppppppppppppp</p>
  18.         <p>ppppppppppppppppp</p>
  19.         <p>ppppppppppppppppp</p>
  20.         <p>ppppppppppppppppp</p>
  21.         <p>ppppppppppppppppp</p>
  22.         <p>ppppppppppppppppp</p>
  23.         <p>ppppppppppppppppp</p>
  24.         <p>ppppppppppppppppp</p>
  25.         <p>ppppppppppppppppp</p>
  26.         <p>ppppppppppppppppp</p>
  27.         <p>ppppppppppppppppp</p>
  28.         <p>ppppppppppppppppp</p>
  29.         <p>ppppppppppppppppp</p>
  30.         <p>ppppppppppppppppp</p>
  31.         <p>ppppppppppppppppp</p>
  32.         <p>ppppppppppppppppp</p>
  33.         <p>ppppppppppppppppp</p>
  34.         <p>ppppppppppppppppp</p>
  35.         <p>ppppppppppppppppp</p>
  36.         <p>ppppppppppppppppp</p>
  37.         <p>ppppppppppppppppp</p>
  38.         <p>ppppppppppppppppp</p>
  39.         <p>ppppppppppppppppp</p>
  40.     </div>
  42.     <script>
  43.         var $username = document.getElementById('username');
  44.         window.onscroll = throttle;
  45.         // 1.上一次事件触发的时间
  46.         let oldTime = Date.now(); // 10:00:00
  47.         function throttle() {
  48.             // 现在触发的时间
  49.             let newTime = Date.now();
  50.             // 现在点击的时间跟上一次点击的时间如果超过了一秒,执行回调
  51.             if (newTime - oldTime >= 1000) {
  52.                 // 在这里执行我们想做的事情
  53.                 console.log('想干嘛干嘛');
  54.                 // 从新计时,这次点击的时间成为下一次点击时间的起点
  55.                 oldTime = newTime;
  56.             }
  57.         }
  58.     </script>
  59. </body>

(三) 防抖和节流的区别

函数防抖和节流区别在于，当事件持续被触发，如果触发时间间隔短于规定的等待时间（n秒），那么

  • 函数防抖的情况下，函数将一直推迟执行，造成不会被执行的效果；
  • 函数节流的情况下，函数将每个 n 秒执行一次。