JavaScript防抖与节流怎样处理高频事件

在 JavaScript 中，高频事件指的是频繁触发的事件，例如滚动、输入、鼠标移动等。为了提高性能并避免因事件处理程序执行时间过长而导致的卡顿或浏览器无响应，我们可以使用防抖（debounce）和节流（throttle）两种技术。

1. 防抖（debounce）： 防抖的基本思想是在事件被触发后 n 秒内函数只执行一次。如果在这 n 秒内又被重新触发，则重新计时。适用于如输入框实时搜索、表单验证等场景。

以下是一个简单的防抖函数实现：

function debounce(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

使用示例：

const handleScroll = debounce(function () {
  console.log('滚动事件触发');
}, 200);

window.addEventListener('scroll', handleScroll);

2. 节流（throttle）： 节流的基本思想是在固定的时间间隔内执行一次事件处理函数。适用于如滚动加载、鼠标移动拖拽等场景。

以下是一个简单的节流函数实现：

function throttle(func, interval) {
  let lastExecution = 0;
  return function () {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastExecution >= interval) {
      lastExecution = now;
      func.apply(context, args);
    }
  };
}

使用示例：

const handleScroll = throttle(function () {
  console.log('滚动事件触发');
}, 200);

window.addEventListener('scroll', handleScroll);

总结：

• 防抖更适合于需要等待用户停止操作后再执行的场景，如搜索建议。
• 节流更适合于需要按照固定频率执行的场景，如滚动加载图片。

根据实际需求选择合适的策略来处理高频事件，可以有效提升应用的性能和用户体验。