JavaScript 防抖&节流

默小言 / 2023-08-31 / 原文

JavaScript的防抖（Debouncing）和节流（Throttling）是两种用于优化高频率事件处理的常见技术。它们都可以限制事件的触发频率，以减少过度触发事件处理函数而导致的性能问题。

防抖（Debouncing）

防抖是指在事件被触发后，等待一定时间再执行事件处理函数。如果在等待时间内事件再次被触发，那么就重新计时。

这样可以避免事件处理函数过于频繁地执行，只有当事件暂停一段时间后，才会真正执行一次事件处理函数。

常见的应用场景：

浏览器窗口大小调整：当用户频繁调整窗口大小时，通过防抖可以避免频繁地重绘页面。
搜索框输入：在用户输入时，等待用户暂停输入后再进行搜索请求，减少请求次数。

实例代码：

function debounce(func, delay) {
  let timerId;
  
  return function (...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 使用防抖包装事件处理函数
const debouncedEventHandler = debounce(function () {
  // 在这里编写事件处理逻辑
}, 300);

节流（Throttling）

节流是指在事件被触发后，固定时间内只执行一次事件处理函数。即使事件被触发多次，在规定的时间间隔内，也只会执行一次事件处理函数。

常见的应用场景：

滚动事件：当用户滚动页面时，通过节流来限制处理滚动事件的频率，减少滚动事件处理函数的调用次数。
点击事件：当用户快速点击按钮时，通过节流来限制点击事件处理函数的执行，防止多次点击导致的问题。

实例代码：

function throttle(func, delay) {
  let isThrottled = false;

  return function (...args) {
    if (!isThrottled) {
      func.apply(this, args);
      isThrottled = true;
      setTimeout(() => (isThrottled = false), delay);
    }
  };
}

// 使用节流包装事件处理函数
const throttledEventHandler = throttle(function () {
  // 在这里编写事件处理逻辑
}, 300);