在开发中会经常遇到一些需要频繁触发的事件的场景。

  1. window 的 resize、scroll
  2. mousedown、mousemove
  3. keyup、keydown

……

demo

  1. // HTML 代码
  2. <body>
  3.   <div id="container">
  4.   </div>
  5. </body>
  7. // CSS 代码
  8. <style>
  9.   #container {
  10.     width: 100%;
  11.     height: 200px;
  12.     line-height: 200px;
  13.     text-align: center;
  14.     color: #fff;
  15.     background-color: #444;
  16.     font-size: 30px;
  17.   }
  18. </style>
  20. // javascript 代码
  21. <script>
  22. let count = 1;
  23. let container = document.getElementById("container");
  25. function getUserAction() {
  26.   container.innerHTML = count++;
  27. }
  29. container.onmousemove = getUserAction;
  30. </script>

debounce.gif

当鼠标滑过时会频繁地触发事件，这个 demo 比较简单，所以浏览器可以完全反应过来，但是如果遇到比较复杂回调函数呢？如 ajax 请求。这样的话就未必能应付过来。

所以需要限制回调函数的触发频率。防抖就是其中一种方法。

防抖的原理：尽管触发事件，但是一定在事件触发 n 秒后才执行回调函数，如果一个事件触发的 n 秒内又触发了这个事件，那么又以这个新的事件的时间为准，n 秒后才执行，总之，就是在触发事件的 n 秒内不再触发事件。

第一版

  1. // 第一版
  2. function debounce(func, wait) {
  3.     let timeout;
  4.     return function () {
  5.         clearTimeout(timeout);
  6.         timeout = setTimeout(func, wait);
  7.     };
  8. }

以开头 demo 为例

  1. container.onmousemove = debounce(getUserAction, 1000);

不管触发多少次都会在下一次触发时取消上一次的 timeout。

debounce1.gif

this 和 event

解决 this 和 event。

  1. // 第二版
  2. function debounce(func, wait) {
  3.     let timeout;
  4.     return function () {
  5.         const context = this, args = arguments;
  6.         clearTimeout(timeout);
  7.         timeout = setTimeout(function () {
  8.             func.apply(context, args);
  9.         }, wait);
  10.     };
  11. }

立即执行

新需求：不希望等到事件停止触发后才执行，希望能立即执行函数，然后等到停止触发 n 秒后，才可以重新触发执行。

  1. // 第三版
  2. function debounce(func, wait, immediate) {
  3.   let timeout;
  4.   return function () {
  5.     const context = this, args = arguments;
  7.     if (timeout) clearTimeout(timeout);
  8.     if (immediate) {
  9.       // 如果已经执行过，不再执行
  10.       let callNow = !timeout;
  11.       timeout = setTimeout(function () {
  12.         timeout = null;
  13.       }, wait);
  14.       if (callNow) func.apply(context, args);
  15.     } else {
  16.       timeout = setTimeout(function () {
  17.         func.apply(context, args);
  18.       }, wait);
  19.     }
  20.   };
  21. }

debounce2.gif

返回值

执行的函数可能会有返回值，所以需要返回函数的执行结果，但是当 immediate 为 false 时，因为使用了 setTimeout，所以返回值是 undefined，所以 immediate 为 true 时，才有返回值。

  1. // 第四版
  2. function debounce(func, wait, immediate) {
  3.     let timeout, result;
  4.     return function () {
  5.         const context = this, args = arguments;
  7.         if (timeout) clearTimeout(timeout);
  8.         if (immediate) {
  9.             // 如果已经执行过，不再执行
  10.             let callNow = !timeout;
  11.             timeout = setTimeout(function () {
  12.                 timeout = null;
  13.             }, wait);
  14.             if (callNow) result = func.apply(context, args);
  15.         } else {
  16.             timeout = setTimeout(function () {
  17.                 func.apply(context, args);
  18.             }, wait);
  19.         }
  20.         return result;
  21.     };
  22. }

cancel

新需求：希望能取消 debounce 函数，比如 debounce 的时间间隔是 10 秒钟，immediate 为 true 时，这样只能再等上 10 秒才能重新触发执行，现在需要一个功能当触发这个功能后，取消防抖，这样再去触发，就可以立即执行。

  1. // 第五版
  2. function debounce(func, wait, immediate) {
  4.     let timeout, result;
  6.     const debounced = function () {
  7.         const context = this, args = arguments;
  9.         if (timeout) clearTimeout(timeout);
  10.         if (immediate) {
  11.             // 如果已经执行过，不再执行
  12.             let callNow = !timeout;
  13.             timeout = setTimeout(function () {
  14.                 timeout = null;
  15.             }, wait);
  16.             if (callNow) result = func.apply(context, args);
  17.         } else {
  18.             timeout = setTimeout(function () {
  19.                 func.apply(context, args);
  20.             }, wait);
  21.         }
  22.         return result;
  23.     };
  25.     debounced.cancel = function () {
  26.         clearTimeout(timeout);
  27.         timeout = null;
  28.     };
  30.     return debounced;
  31. }

以 demo 为例

  1. let count = 1;
  2. const container = document.getElementById("container");
  4. function getUserAction() {
  5.     container.innerHTML = count++;
  6. }
  8. const setUserAction = debounce(getUserAction, 10000, true);
  10. container.onmousemove = setUserAction;
  12. document.getElementById("btn").addEventListener("click", function () {
  13.     setUserAction.cancel();
  14. });

下面是每隔 10 秒执行一次

debounce3.gif

参考：

[1] javascript专题之跟着underscore学防抖
[2] 完整版例子