可配置防抖函数支持 immediate 模式（首次立即执行，冷却期内忽略后续调用）和标准模式（延迟执行最后一次），通过 timer 状态与 immediate 参数协同控制执行时机，并提供 cancel 方法。

可配置的防抖函数需要支持 immediate 模式（即首次调用立即执行，后续触发在冷却期内被忽略），同时保留标准防抖行为（延迟执行最后一次）。关键在于区分两种模式下的定时器管理与执行时机控制。

理解 immediate 模式的行为逻辑

在 immediate 模式下：

• 第一次调用函数时，立刻执行回调，不等待；
• 之后在 wait 毫秒内再次触发，会被忽略（不执行，也不重置）；
• wait 时间过后，若再次触发，则重新进入 immediate 流程（即又立刻执行一次）。

这与标准防抖（始终延迟、以最后一次为准）形成互补，适用于按钮点击防重复提交、搜索框首次快速响应等场景。

核心实现：用标志位 + 定时器协同控制

需维护两个关键状态：

• timer：存储当前 setTimeout 句柄，用于清除；
• isImmediatePending（或类似标志）：标记“是否刚进入 immediate 状态且仍在冷却中”。

更简洁的做法是：不额外设标志位，而是通过 timer 是否为 null + immediate 参数组合判断。例如：

当 immediate 为 true 时，首次调用直接执行，并设置 timer 延迟清除“冷却态”；后续调用若 timer 存在，说明还在冷却期，直接跳过。

完整可配置防抖函数示例

以下是一个兼顾 immediate、可取消、支持 this 和参数透传的实现：

function debounce(func, wait, immediate = false) {
  let timer = null;

  const debounced = function(...args) {
    const later = () => {
      if (!immediate) func.apply(this, args);
      timer = null;
    };

    const callNow = immediate && !timer;
    if (callNow) func.apply(this, args);

    clearTimeout(timer);
    timer = setTimeout(later, wait);
  };

  debounced.cancel = () => {
    clearTimeout(timer);
    timer = null;
  };

  return debounced;
}

说明：

• callNow 判断确保：immediate 为真 + 当前无活跃 timer → 才立即执行；
• 每次调用都 clearTimeout，保证旧任务不干扰；
• later 中只在 !immediate 时执行 func，避免重复调用；
• cancel 方法提供手动清理能力，便于测试或生命周期管理。

使用时注意 this 和参数绑定

该实现已用 func.apply(this, args) 正确传递上下文和参数。如需预绑定，建议在调用 debounce 时处理：

• ❌ 错误：debounce(obj.method, 300) —— this 会丢失；
• ✅ 正确：debounce(() => obj.method(), 300) 或 debounce(obj.method.bind(obj), 300)；
• ✅ 更推荐：debounce(obj.method, 300).bind(obj)（但注意 bind 后 cancel 需从原函数访问）。

实际项目中，常配合 React useCallback 或 Vue 的 watch handler 封装，确保引用稳定。