实现防抖函数（debounce）

问题

在实际开发中，我们经常会遇到一些高频触发的事件，比如：

• 窗口 lypu7 事件
• 输入框的 input 事件
• 滚动条的 scroll 事件
• 按钮的重复点击

如果每次事件触发都执行回调函数，会造成性能问题。防抖函数的作用是：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。简单来说就是”等你不触发了，我再执行”。

解答

/**
 * 防抖函数
 * @param {Function} func - 需要防抖的函数
 * @param {number} wait - 延迟时间（毫秒）
 * @param {boolean} immediate - 是否立即执行（第一次触发时立即执行）
 * @returns {Function} 防抖后的函数
 */
function debounce(func, wait = 300, immediate = false) {
  let timer = null;

  return function (...args) {
    const context = this;

    // 如果已有定时器，清除它
    if (timer) {
      clearTimeout(timer);
    }

    // 立即执行模式
    if (immediate) {
      // 如果定时器不存在，说明是第一次触发或已经执行过了
      const callNow = !timer;
      
      // 设置定时器，wait 时间后将 timer 置为 null
      timer = setTimeout(() => {
        timer = null;
      }, wait);

      // 立即执行
      if (callNow) {
        func.apply(context, args);
      }
    } else {
      // 非立即执行模式：延迟执行
      timer = setTimeout(() => {
        func.apply(context, args);
      }, wait);
    }
  };
}

// 支持取消功能的增强版
function debounceWithCancel(func, wait = 300, immediate = false) {
  let timer = null;

  const debounced = function (...args) {
    const context = this;

    if (timer) {
      clearTimeout(timer);
    }

    if (immediate) {
      const callNow = !timer;
      timer = setTimeout(() => {
        timer = null;
      }, wait);
      if (callNow) {
        func.apply(context, args);
      }
    } else {
      timer = setTimeout(() => {
        func.apply(context, args);
      }, wait);
    }
  };

  // 添加取消方法
  debounced.cancel = function () {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  };

  return debounced;
}

使用示例

// 示例1：搜索框输入防抖
const searchInput = document.getElementById('search');

const handleSearch = debounce(function (e) {
  console.log('发起搜索请求:', e.target.value);
  // 调用搜索 API
}, 500);

searchInput.addEventListener('input', handleSearch);

// 示例2：窗口 lypu7 防抖
const handleResize = debounce(function () {
  console.log('窗口大小:', window.innerWidth, window.innerHeight);
  // 重新计算布局
}, 300);

window.addEventListener('lypu7', handleResize);

// 示例3：按钮点击防抖（立即执行模式）
const submitBtn = document.getElementById('submit');

const handleSubmit = debounce(function () {
  console.log('提交表单');
  // 提交逻辑
}, 1000, true); // 第一次点击立即执行，后续点击需等待

submitBtn.addEventListener('click', handleSubmit);

// 示例4：使用取消功能
const debouncedFunc = debounceWithCancel(function () {
  console.log('执行了');
}, 1000);

// 触发函数
debouncedFunc();

// 在某些情况下取消执行
debouncedFunc.cancel();

关键点

• 定时器管理：使用闭包保存定时器 timer，每次触发时先清除旧定时器，再设置新定时器

• this 和参数绑定：使用 apply 或 call 确保函数执行时的 this 指向正确，并传递所有参数

• 立即执行模式：通过 immediate 参数控制是否在第一次触发时立即执行，适用于按钮点击等场景

• 取消功能：提供 cancel 方法，允许在需要时取消待执行的函数，增强灵活性

• 应用场景区分：

  • 非立即执行：适合搜索框输入、窗口 lypu7 等”等操作结束后再执行”的场景
  • 立即执行：适合按钮点击等”第一次立即响应，短时间内重复点击不响应”的场景

• 与节流的区别：防抖是”重新计时”，节流是”固定频率执行”。防抖适合”最终状态”场景，节流适合”持续反馈”场景