前端开发中防抖和节流技术解析

防抖（Debounce）和节流（Throttle）是前端开发中常用的两种优化高频事件处理的技术手段，它们的主要区别在于触发时机和执行频率的控制。

1. 防抖（Debounce）

定义：防抖的核心思想是在事件被触发后，等待一段时间（延迟时间），如果在这段时间内没有再次触发事件，才执行事件处理函数。如果在等待时间内再次触发了事件，则重新计时。

适用场景：

• 输入框实时搜索建议（用户在输入过程中不触发搜索，停止输入后才触发）
• 窗口大小调整（resize）事件
• 按钮点击防止重复提交

实现示例：

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

// 使用示例
window.addEventListener('resize', debounce(() => {
  console.log('Window resized');
}, 300));

2. 节流（Throttle）

定义：节流的核心思想是在一定时间间隔内，无论事件触发多少次，只执行一次事件处理函数。节流会稀释事件的执行频率，确保事件处理函数不会过于频繁地执行。

适用场景：

• 滚动事件（scroll）处理
• 鼠标移动（mousemove）事件
• 频繁的点击事件

实现示例：

function throttle(func, wait) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= wait) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

// 使用示例
window.addEventListener('scroll', throttle(() => {
  console.log('Scrolling');
}, 300));

3. 区别总结

4. 选择依据

• 防抖：适用于需要在事件停止触发后才执行操作的场景，避免频繁触发导致的性能问题。
• 节流：适用于需要在一定时间间隔内执行操作的场景，确保操作的执行频率不会过高。

通过合理使用防抖和节流，可以有效优化前端性能，提升用户体验。