化繁为简：防抖还是节流——手把手带你搞懂事件处理的艺术

2023-01-19 13:34:27

控制用户点击狂潮：防抖与节流，事件处理的秘密武器

我们作为程序员，总是希望我们的程序能像火箭一样快速响应用户操作。然而，当用户点击按钮或链接时，后台往往需要执行耗时的任务，比如发送网络请求或更新数据库。如果用户在这些任务完成之前再次点击，就会触发重复请求或更新，拖慢程序速度。

解决这个问题的利器就是防抖和节流，它们就像两只训练有素的守门员，控制着事件的触发频率，确保程序平稳运行。

防抖：延迟执行，给用户缓冲时间

防抖的精髓在于延迟执行。当用户触发事件时，一个计时器会启动。如果在计时器结束前事件再次触发，计时器会重启。只有当计时器走完，事件才会真正执行。

代码示例：

function debounce(func, delay) {
  let timer = null;
  return function () {
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
      timer = null;
    }, delay);
  };
}

适用场景：

用户在输入框中输入内容时，不需要实时更新搜索结果。
用户滚动页面时，不需要即时加载新内容。
用户点击按钮时，不需要马上触发操作，而是需要给用户一点缓冲时间。

节流：限制频率，让触发井然有序

节流则采取另一种策略。当事件触发时，节流会检查上一次事件触发的时间。如果两次触发时间间隔太短，节流会无情地忽略这次事件。只有在间隔超过一定阈值后，事件才会被执行。

代码示例：

function throttle(func, delay) {
  let lastTime = 0;
  return function () {
    const args = arguments;
    const now = Date.now();
    if (now - lastTime < delay) {
      return;
    }
    lastTime = now;
    func.apply(this, args);
  };
}