节流和防抖

题目

节流和防抖有何区别？分别用于什么场景？

防抖

防抖，即防止抖动。抖动着就先不管它，等啥时候静止了，再做操作。

例如，一个搜索输入框，等输入停止之后，自动执行搜索。

代码参考

function debounce(fn, delay = 200) {
  let timer = 0;

  return function () {
    if (timer) clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, arguments); // 透传 this 和参数
      timer = 0;
    }, delay);
  };
}

节流

节流，即节省交互沟通。流，可理解为交流，不一定会产生网络流量。

例如，drag 的回调，上传进度的回调，都可以设置一个固定的频率，没必要那么频繁。

代码参考

function throttle(fn, delay = 100) {
  let timer = 0;

  return function () {
    if (timer) return;

    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = 0;
    }, delay);
  };
}

答案

防抖和节流都用于处理频繁触发的操作，优化操作体验。

触发频率

• 防抖，不固定
• 节流，固定

场景

• 防抖，结果式，即一次调用即可
• 节流，过程式，即需要持续一个过程，一次不够

划重点

• 抓住“触发频率”是否固定，即可抓住重点
• 实际项目推荐使用 lodash