节流与防抖：提升事件处理效能的利器

2023-12-28 05:57:52

节流与防抖：驾驭事件处理的艺术

在现代 Web 开发中，事件处理是至关重要的。用户与界面交互时会触发各种事件，比如点击按钮、滚动页面或移动鼠标。为提升用户体验并优化资源利用，节流与防抖技术应运而生。

节流：过滤冗余事件

节流通过限制事件触发频率，防止短时间内重复执行同一操作。想象一下你在搜索引擎中输入查询，每按一下键盘都会触发一次搜索请求。借助节流，我们可以设定一个时间间隔，比如 1 秒，在此期间只允许执行一次搜索，避免重复请求浪费服务器资源。

实现节流的两种方法：

使用内置函数：

const throttledFunction = _.throttle(functionToThrottle, 1000); // 1000 毫秒的时间间隔

手动实现：

let lastCall = 0;

const throttle = (func, delay) => {
  const now = new Date().getTime();

  if (now - lastCall < delay) {
    return;
  }

  lastCall = now;
  func();
};

防抖：延迟执行事件

防抖与节流相反，它在事件触发后延迟执行操作。当用户短时间内连续触发同一事件时，防抖确保只执行最后一次事件。比如在文本输入框中，当用户输入文本时，防抖可以延迟更新数据库，直到用户停止输入，减少不必要的数据库查询。

实现防抖的两种方法：

使用内置函数：

const debouncedFunction = _.debounce(functionToDebounce, 1000); // 1000 毫秒的延迟时间

手动实现：

let timer;

const debounce = (func, delay) => {
  if (timer) {
    clearTimeout(timer);
  }

  timer = setTimeout(() => {
    func();
  }, delay);
};

节流与防抖的对比

节流和防抖尽管都是事件处理技术，但工作原理和适用场景却截然不同。

特性	节流	防抖
触发频率	限制重复触发	延迟最后触发
适用场景	高频重复事件	间隔事件触发
用户体验	防止重复操作	响应用户意图
资源消耗	降低资源消耗	减少资源消耗