例如 scroll、input 等事件频繁触发时，可能造成性能问题，若事件处理时使用了异步方法（例如 ajax 请求），还有可能导致结果错误，例如输入框输入时自动 ajax 请求查询数据，若不进行处理，则会频繁触发 ajax 请求，且显示的查询结果可能不是当前输入内容的返回结果。

概念

  • 设定一个周期，期间不执行动作
  • 前缘 leading 和延迟 trailing
    • 前缘：执行动作后再开始周期
    • 延迟：周期结束后再执行动作
  • 防抖 debounce 和节流 throttle
    • 防抖：若期间动作又被触发，则重新设定周期
    • 节流：周期固定


应用场景

防抖 debounce

简单来说，就是在一段时间大量频繁触发事件时，只在最后一次事件触发时执行动作。

  1. 比如输入框 input onchange，输入查询字符串时实时搜索相应结果，只需要查询最后输入完成的字符串。
  2. 又或者窗口 resize 后重新计算页面某一元素尺寸 width/height，只需要 resize 完成后进行计算。

    节流 throttle

    而有些情况下则需要限制频率的同时多次触发，而非只是最后一次。
    例如最常见的监听 scroll 事件并动态加载某一元素（例如返回顶部按钮，或是懒加载图片等等）

lodash 实现

防抖 debounce

  1. /**
  2. * 部分代码有一定简化
  3. * fn: 执行函数
  4. * wait: 周期时间
  5. * leading: true 表示前缘执行，false 表示延迟执行
  6. * maxWait: 如果设置了，就表示固定 maxWait 时间后一定执行
  7. */
  8. function debounce(fn, wait, leading = false, maxWait) {
  9.   let result;
  10.   let lastThis;
  11.   let lastCallTime;
  12.   let lastInvokeTime = 0;
  13.   let timerId;
  15.   if (maxWait !== undefined) maxWait = Math.max(maxWait || 0, wait);
  17.   // 开始周期
  18.   function leadingEdge(time) {
  19.     lastInvokeTime = time;
  20.     timerId = setTimeout(timerExpired, wait);
  21.     // 若设置了前缘 leading，则立即执行一次 fn
  22.     return leading ? invokeFunc(time) : result;
  23.   }
  25.   // 结束周期
  26.   function timeExpired() {
  27.     const time = Date.now();
  28.     if (shouldInvoke(time)) {
  29.       timerId = undefined;
  30.       if (!leading && lastArgs) {
  31.         // lastArgs 表示 fn 至少 debounced 了一次
  32.         return invokeFunc(time);
  33.       }
  34.       lastArgs = lastThis = undefined;
  35.     }
  36.     return result;
  37.   }
  39.   // 执行动作
  40.   function invokeFunc(time) {
  41.     const args = lastArgs;
  42.     const thisArg = lastThis;
  44.     lastArgs = lastThis = undefined;
  45.     lastInvokeTime = time;
  47.     result = fn.call(thisArg, ...args);
  48.     return result;
  49.   }
  51.   // 判断是否处于可执行阶段
  52.   function shouldInvoke(time) {
  53.     const timeSinceLastCall = time - lastCallTime;
  54.     const timeSinceLastInvoke = time - lastInvokeTime;
  55.     return (
  56.       lastCallTime === undefined // 第一次调用
  57.       || timeSinceLastCall >= wait // 已经过了一个周期不需要等待了
  58.       || timeSinceLastCall < 0 // shouldInvoke 调用已经过时了
  59.       || (maxWait && timeSinceLastInvoke >= maxWait) // 到了固定周期执行时间了
  60.     );
  61.   }
  63.   function debounced(...args) {
  64.     const time = Date.now();
  66.     lastThis = this;
  67.     lastArgs = args;
  68.     lastCallTime = time;
  70.     if (shouldInvoke(time)) {
  71.       if (timerId === undefined) {
  72.         // 没有等待的周期
  73.         return leadingEdge(lastCallTime);
  74.       }
  75.       if (maxWait) {
  76.         // 有设置固定强制执行周期时间时，强制调用
  77.         timerId = setTimeout(timeExpired, wait);
  78.         return invokeFunc(lastCallTime);
  79.       }
  80.     }
  81.     if (timerId === undefined) {
  82.       // 第一次调用
  83.       timerId = setTimeout(timeExpired, wait);
  84.     }
  85.     return result;
  86.   }
  88.   return debounced;
  89. }

节流 throttle

  1. function throttle(fn, wait, leading) {
  2.   // throttle 和 debounce 的差别在于固定周期执行，即 maxWait 设置为 wait
  3.   return debounce(fn, wait, leading, wait);
  4. }