在前端开发中会遇到一些频繁的事件触发，比如：

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

为此，我们举个示例代码来了解事件如何频繁的触发：

我们写个 index.html 文件：

  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
  7.     <title>debounce</title>
  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>
  19. </head>
  21. <body>
  22.     <div id="container"></div>
  23.     <script>
  24.         var count = 1;
  25.         var container = document.getElementById('container');
  27.         function getUserAction() {
  28.             container.innerHTML = count++;
  29.         };
  31.         container.onmousemove = getUserAction;
  32.     </script>
  33. </body>
  35. </html>

image.png

从左边滑到右边就触发了 100多次 getUserAction 函数！

因为这个例子很简单，所以浏览器完全反应的过来，可是如果是复杂的回调函数或是 ajax 请求呢？假设 1 秒触发了 60 次，因为大多数设备是60hz刷新率，所以每个回调就必须在 1000 / 60 = 16.67ms 内完成，否则就会有卡顿出现。

为了解决这个问题，一般有两种解决方案：

  1. debounce 防抖
  2. throttle 节流

debounce 防抖

防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行，真是任性呐!

  1. container.onmousemove = debounce(getUserAction, 1000);
  3. function debounce(func, wait) {
  4.     var timeout;
  5.     return function () {
  6.         clearTimeout(timeout)
  7.         timeout = setTimeout(func, wait);
  8.     }
  9. }


https://github.com/mqyqingfeng/Blog/issues/22