事件处理器之防抖与节流，让前端更流畅

前端

2023-09-26 00:20:09

掌握防抖与节流：优化前端事件处理的秘密武器

在前端开发的世界中，处理高频事件是一个常见的挑战。每当用户滚动、移动鼠标或按下键盘，都会触发一个事件。如果不加限制地处理这些事件，可能会导致性能问题，从而使页面卡顿和响应缓慢。

这就是防抖和节流技术派上用场的地方。这些技术通过巧妙地控制事件处理器的执行频率来提高页面性能。

防抖：延迟执行，避免频繁触发

想象一下你正在编写一个滚动事件处理器。当用户滚动页面时，该处理器就会触发。但是，如果用户滚动得太快，处理器就会被频繁触发，导致页面卡顿。

防抖技术就是为了解决这个问题而设计的。它通过延迟事件处理器的执行来工作。这意味着，处理器只会在用户停止滚动一段时间后才会触发。这样，可以有效地避免频繁触发，让页面保持流畅。

代码示例：

// 防抖函数
const debounce = (fn, delay) => {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
};

// 使用防抖
window.addEventListener('scroll', debounce(() => {
  // 在用户停止滚动后执行的代码
}, 100));

节流：限制执行频率，按需响应

节流技术与防抖不同，它会限制事件处理器的执行频率。换句话说，处理器只能按设定的时间间隔执行一次。

例如，如果你有一个鼠标移动事件处理器，那么节流可以确保处理器不会在每次鼠标移动时都触发。而是每隔一段时间（例如 100 毫秒）才执行一次。

代码示例：

// 节流函数
const throttle = (fn, delay) => {
  let canRun = true;
  return function () {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, delay);
  };
};

// 使用节流
window.addEventListener('mousemove', throttle(() => {
  // 每 100 毫秒执行一次的代码
}, 100));