js 实现防抖

防抖的基本概念

防抖（Debounce）是一种优化高频触发事件的技术，确保事件在停止触发后延迟执行。例如，输入框搜索时减少请求次数。

实现代码示例

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

使用场景

• 输入框实时搜索（避免频繁请求）
• 窗口大小调整（计算最终尺寸后执行）
• 滚动事件（停止滚动后触发逻辑）

进阶优化：立即执行版本

function debounce(func, delay, immediate) {
  let timeoutId;
  return function(...args) {
    const context = this;
    const callNow = immediate && !timeoutId;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      timeoutId = null;
      if (!immediate) func.apply(context, args);
    }, delay);
    if (callNow) func.apply(context, args);
  };
}

注意事项

• 确保clearTimeout清除正确的定时器。
• 使用apply保持函数上下文（this）的正确性。
• 频繁操作时，防抖会重置计时器，只有最后一次生效。