怎么利用JavaScript闭包实现函数防抖和节流

一、为什么防抖和节流必须依赖闭包？

防抖与节流本质上都是对函数执行时机的高级控制。为了判断当前是否应该触发目标逻辑，程序必须在跨越多次独立事件触发的过程中，持续记录两个关键内部状态：

• 防抖：上一次事件触发后设立的定时器 ID（以便在下一次触发时取消它并重新计时）。
• 节流：上一次成功执行目标函数的时间戳，或者当前周期正在等待的定时器标记。

如果将这些状态变量定义为全局变量，不仅会严重污染全局命名空间，还会在同一页面存在多个防抖函数时互相覆盖，导致逻辑混乱。若定义在事件处理函数内部，由于每次事件触发都会创建全新的局部执行上下文，变量在函数执行结束即被销毁，根本无法跨调用维持历史状态。

闭包正是解决这一矛盾的最优解。当一个高阶函数执行并返回内部包装函数时，返回的函数保留了对其外部词法作用域（Lexical Environment）的引用。即便外层工厂函数已经执行完毕，只要返回的函数仍作为事件监听器被引用，JavaScript 垃圾回收器就无法回收该词法作用域，从而实现了私有状态变量的持久化与实例完全隔离。

二、利用闭包实现函数防抖（Debounce）

防抖的核心规则可以总结为：“你一直触发，我就一直重新计时；只有等你彻底停下来并超过指定等待时间后，我才真正执行一次。”

1. 基础版防抖实现与逐行解析

在闭包外层定义一个 timer 变量，内层函数每次被调用时，先清除上一次排队的定时器，再重新启动一个新的定时器：

// 基础版防抖函数
function debounce(fn, delay) {
  // 在外层工厂函数的作用域中定义私有变量 timer
  // 该变量被返回的内层匿名函数形成闭包引用
  let timer = null;

  return function (...args) {
    // 保存当前事件触发时的 this 上下文
    const context = this;

    // 只要有新事件到达，立即清除上一个排队的定时器
    if (timer) {
      clearTimeout(timer);
    }

    // 重新设立定时器，并在 delay 毫秒后真正执行目标函数
    timer = setTimeout(() => {
      fn.apply(context, args);
      timer = null; // 执行完成后重置 timer
    }, delay);
  };
}

2. 完善工程细节：支持首次立即执行与手动取消

在部分交互场景（例如点赞或提交按钮），用户希望在第一次点击时立即做出响应，随后短时间内的疯狂重复点击都被拦截过滤。此外，在页面组件销毁时，需要支持主动取消排队中的定时器以防止内存泄漏：

/**
 * 完整增强版防抖函数
 * @param {Function} fn - 目标回调函数
 * @param {number} delay - 延迟等待时间 (毫秒)
 * @param {boolean} immediate - 是否在首次触发时立即执行一次
 */
function debounceEnhanced(fn, delay = 300, immediate = false) {
  let timer = null;

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

    // 若已有定时器在等待，则清除并重置
    if (timer) clearTimeout(timer);

    if (immediate) {
      // 判断当前是否处于空闲启动期（首次调用时 timer 为 null）
      const callNow = !timer;

      // 启动定时器，并在经过 delay 后将 timer 重置为 null，解除冷却
      timer = setTimeout(() => {
        timer = null;
      }, delay);

      // 如果是冷却期结束后的首次触发，立即执行
      if (callNow) {
        fn.apply(context, args);
      }
    } else {
      // 标准延迟执行逻辑
      timer = setTimeout(() => {
        fn.apply(context, args);
        timer = null;
      }, delay);
    }
  };

  // 利用闭包暴露取消能力，用于页面卸载或重置时清理
  debounced.cancel = function () {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  };

  return debounced;
}

三、利用闭包实现函数节流（Throttle）

节流的核心规则可以总结为：“任你触发多频繁，我自保持固定节拍；在指定的周期内，我最多只执行一次。”

在实现上，闭包既可以通过时间戳比对来实现（偏向首发立即执行），也可以通过定时器占位来实现（偏向延迟收尾）。在实际开发中，最健壮的方式是将二者结合，实现兼顾首尾触发的完整节流。

1. 时间戳方式（首次立即执行）

闭包在外层维持 lastTime 初始为 0。事件触发时获取当前时间戳 now，如果 now - lastTime >= wait，则立即执行并将 lastTime 更新为当前时间：

// 时间戳版节流（领先沿执行）
function throttleByTimestamp(fn, wait) {
  let lastTime = 0; // 闭包常驻变量

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

2. 定时器方式（末次延迟执行）

闭包在外层维持 timer 标记。只要定时器还在冷却中，就不接受任何新触发；直到定时器跑完并执行回调后，才把 timer 设回 null 重新开放：

// 定时器版节流（滞后沿执行）
function throttleByTimer(fn, wait) {
  let timer = null; // 闭包常驻变量

  return function (...args) {
    const context = this;
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(context, args);
        timer = null; // 周期结束，放行下次触发
      }, wait);
    }
  };
}

3. 双剑合璧：完整工业级节流实现

结合时间戳与定时器，能够确保首次触发立即执行，且在用户停止操作后，最后一次触发的数据仍然能够被补发处理（Trailing 保证），并提供取消方法：

/**
 * 工业级双模节流函数
 * @param {Function} fn 目标函数
 * @param {number} wait 节流周期 (ms)
 * @param {Object} options 配置项：leading(是否立即执行), trailing(是否延时收尾)
 */
function throttle(fn, wait = 300, { leading = true, trailing = true } = {}) {
  let timer = null;
  let lastTime = 0;
  let storedContext = null;
  let storedArgs = null;

  const throttled = function (...args) {
    const now = Date.now();

    // 若禁用 leading 且首次进入，重设基准时间戳
    if (!lastTime && !leading) {
      lastTime = now;
    }

    const remaining = wait - (now - lastTime);
    storedContext = this;
    storedArgs = args;

    // 达到或超过节流周期，或者系统时间被向后调
    if (remaining <= 0 || remaining > wait) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      lastTime = now;
      fn.apply(storedContext, storedArgs);
      storedContext = storedArgs = null;
    } else if (!timer && trailing) {
      // 处于周期冷却期内，若开启 trailing，排队等待剩余时间后补发一次
      timer = setTimeout(() => {
        lastTime = leading ? Date.now() : 0;
        timer = null;
        fn.apply(storedContext, storedArgs);
        storedContext = storedArgs = null;
      }, remaining);
    }
  };

  throttled.cancel = function () {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    lastTime = 0;
    storedContext = storedArgs = null;
  };

  return throttled;
}

四、防抖与节流的区别与技术选型指南

很多初学者容易将防抖和节流混淆。其实只要把握一条核心判断原则：“你在动作过程中，是否需要持续获取执行结果的反馈？”

五、闭包实现中的三大关键陷阱与避坑方案

// 正确做法：利用 useCallback 或 useRef 固化闭包实例
const handleSearch = useCallback(
  debounce((keyword) => {
    fetchData(keyword);
  }, 300),
  [] // 空依赖数组保证整个生命周期共用同一个闭包
);

六、总结

通过本文的探讨可以明确，闭包不仅是 JavaScript 语言的核心特性，更是解决异步状态保持的高效工程手段。借助闭包，防抖与节流可以在完全不依赖全局变量的前提下，构建出私有、隔离且功能强大的流控包装器：

• 理解闭包的本质作用：在外层保留 timer 和 lastTime 变量，为内层事件回调提供不受垃圾回收影响的状态容器。
• 精准匹配业务场景：需要结果选防抖，追踪过程选节流；利用立即执行与手动取消能力补全工程健壮性。
• 重视工程环境细节：处理好 this 与参数透传，在组件卸载时及时 cancel 清理定时器，并在现代前端框架中避免重复创建闭包实例。