事件处理中的防抖与节流：化繁为简，提升性能

2024-01-15 03:20:31

在前端开发中，我们常常会遇到频繁触发的事件，如滚动、窗口大小变化、点击和输入。这些事件的频繁触发可能会导致性能下降，特别是当处理复杂的计算或 DOM 操作时。为了解决这个问题，防抖和节流两种技术应运而生，让我们来深入了解它们。

防抖：延迟执行

防抖的作用是延迟一个事件的执行，直到该事件在一段时间内不再被触发。这对于防止由于事件触发过快而导致的不必要操作非常有用，例如在输入框中输入时频繁更新搜索结果。

想象一下，有一个搜索输入框，每当用户键入一个字符时，我们就向服务器发送一个搜索请求。如果用户输入速度很快，这可能会导致大量不必要的请求，从而增加服务器负载并减慢响应时间。为了解决这个问题，我们可以使用防抖，在用户停止输入一定时间（例如 500 毫秒）后才发送搜索请求。这样，只有在用户完成输入时才会触发请求，减少了不必要的开销。

节流：限制执行频率

节流的原理不同，它限制一个函数在一段时间内只被执行一次。这对于防止因频繁点击或滚动等操作而导致的过快执行非常有用。

考虑一个例子，我们有一个按钮，单击后触发一个复杂的操作。如果用户快速连续地单击按钮，这可能会导致该操作被多次触发，导致不必要的资源消耗或意外行为。为了避免这种情况，我们可以使用节流，将按钮的点击事件限制为每秒只执行一次。这样，无论用户如何快速地单击按钮，操作都只会执行一次。

实现防抖和节流

在 JavaScript 中，可以使用以下代码片段实现防抖和节流：

防抖

const debounce = (func, wait) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
};

节流

const throttle = (func, wait) => {
  let isThrottled = false;
  return (...args) => {
    if (!isThrottled) {
      func(...args);
      isThrottled = true;
      setTimeout(() => (isThrottled = false), wait);
    }
  };
};