怎么使用JS闭包实现函数防抖与节流

JavaScript 运行机制与性能实践

在前端交互开发中，页面滚动（scroll）、窗口缩放（resize）、搜索联想（input）以及按钮点击等事件往往以极高的频率被触发。如果每次触发都直接执行重型 DOM 计算、数据格式化或异步网络请求，浏览器主线程将迅速不堪重负，产生界面掉帧、卡顿甚至请求雪崩。函数防抖（Debounce）与函数节流（Throttle）是平息这类高频事件风暴的核心控制手段，而 JavaScript 的闭包（Closure）则是构建它们不可或缺的技术基石。本文将直接从闭包如何持久化私有状态切入，手把手带你手写出健壮、支持参数透传及具备撤销功能的防抖与节流实现。

一、闭包在防抖与节流中到底起什么作用？

许多初学者在理解防抖与节流时，容易把注意力全放在 setTimeout 上，而忽略了“为什么每次事件触发时，那个计时器变量还能被找到”。这正是闭包发挥关键作用的地方。

闭包是指一个函数有权访问其外部词法作用域中的变量。在防抖和节流的实现中，我们需要一个高阶工厂函数来包裹目标函数。这个工厂函数在内部声明状态变量（例如定时器标识 timer 或上次执行时间 lastTime），并返回一个事件响应包装函数：

• 外层函数执行完毕出栈后，变量不被销毁：在 JavaScript 内存垃圾回收机制中，只要返回的内部事件处理函数还被 DOM 事件监听器或变量持有引用，外层作用域中的 timer 就会一直驻留在堆内存的闭包作用域中。
• 实现状态的私有化封装：如果将 timer 声明为全局变量，一旦页面上有多个输入框或按钮各自需要防抖，共用一个全局变量就会互相覆盖计时器，造成灾难性的状态混淆；而如果只在普通函数内部声明 timer，每次事件触发时该函数都会重新建立上下文并把 timer 初始化为 null，根本无法得知上一次调用的计时状态。
• 多实例独立隔离：每次调用 debounce(fn, 300) 或 throttle(fn, 300) 时，都会在堆内存中开辟一段全新的闭包环境。无论是组件 A 的搜索框还是组件 B 的下拉加载，它们各自拥有一套完全隔离的 timer，互不干扰。

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

防抖的核心逻辑：“无论高频触发了多少次，只要两次触发之间的间隔小于设定时间，就重新开始计时；只有在最后一次触发后保持静止达到指定延迟，才真正执行一次目标函数”。

这就像乘坐电梯：只要有人在关门倒计时结束前重新按下了开门键，电梯关门的倒计时就会立刻归零并重新开始倒数，直到门前彻底安静达到预设时间后电梯才会关门运行。

1. 防抖的实现推导步骤

1. 定义外层包装函数：接收目标业务函数 fn 和等待时间 delay（默认 300ms）。
2. 闭包私有变量声明：在外层作用域声明 let timer = null，用于记录当前正在倒计时的定时器编号。
3. 返回事件包装函数：当宿主环境（如用户输入）触发事件时，执行该包装函数。
4. 打断重置计时：先判断 timer 是否存在。若存在，立即调用 clearTimeout(timer) 将其销毁，阻止尚未到期的旧任务执行。
5. 开启新定时器：调用 setTimeout 重新注册延时执行任务，并将返回的计时器 ID 赋值给闭包中的 timer。
6. 上下文透传：在定时器到期回调内部，通过 fn.apply(this, args) 确保目标函数能够正确获取原始事件对象（如 KeyboardEvent）和绑定元素。

2. 基础防抖代码实现

基于上述推导，我们编写标准的基础防抖函数如下：

/**
 * 基础函数防抖实现
 * @param {Function} fn 需要防抖的目标业务函数
 * @param {number} delay 防抖等待延迟时间（毫秒）
 * @returns {Function} 经过闭包包装后的高阶函数
 */
function debounce(fn, delay = 300) {
  // 驻留在闭包中的私有定时器句柄
  let timer = null;

  return function (...args) {
    // 1. 保留当前触发环境下的 this 上下文（例如绑定的 DOM 节点）
    const context = this;

    // 2. 如果存在尚未执行的旧定时器，立刻清除它
    if (timer) {
      clearTimeout(timer);
    }

    // 3. 重新设置新的倒计时
    timer = setTimeout(() => {
      fn.apply(context, args);
      timer = null; // 执行完成后重置状态
    }, delay);
  };
}

3. 进阶增强：支持首次立即执行（Immediate）与手动取消

在某些业务场景下（例如防止用户疯狂连击“提交订单”按钮），我们希望在第一次点击时立刻触发，随后的连续疯狂点击则被拦截；直到用户停手超过设定间隔后，下一次点击才再次被视作首次有效触发。同时，在 React / Vue 组件销毁时，需要支持主动取消定时器以杜绝内存泄漏：

/**
 * 完整生产级防抖函数（支持立即执行与手动取消）
 */
function debounceEnhanced(fn, delay = 300, immediate = false) {
  let timer = null;

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

    // 只要有新触发，就清空原有待执行的倒计时
    if (timer) clearTimeout(timer);

    if (immediate) {
      // 只有当前没有定时器在运行时，才判定为首次操作
      const callNow = !timer;

      // 设置一个延时任务：经过 delay 后清空 timer，允许下一次再次立即执行
      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）

节流的核心逻辑：“在高频持续触发的动作中，强制规定在一段固定的时间间隔内（例如每隔 300ms），只允许目标函数执行一次”。

与防抖的“不断重置与静止才执行”截然不同，节流关注的是节奏的均匀稀释。这就像水龙头拧开后在有规律地滴水，不管管道里的水流多汹涌，阀门始终保持每秒只滴出一滴水。

闭包在节流中有两种经典的实现模式：时间戳法与定时器法。

1. 时间戳实现法（立即执行型）

利用闭包保存上一次执行的时间戳 lastTime。每次事件发生时获取当前时间戳 now，如果时间差值大于等于等待间隔，则执行目标函数并刷新 lastTime：

/**
 * 节流实现：时间戳法
 * 特征：第一次触发立刻执行（leading），停止触发后后续动作不会延迟补发
 */
function throttleTimestamp(fn, wait = 300) {
  let lastTime = 0; // 闭包存储上一次执行的时间点

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

    // 当前时间与上次执行时间差大于等于指定周期，立即执行
    if (now - lastTime >= wait) {
      fn.apply(context, args);
      lastTime = now; // 更新最后执行时间
    }
  };
}

2. 定时器实现法（延迟补发型）

利用闭包保存 timer 标识。如果 timer 存在，说明当前正处于时间锁定窗口内，直接忽略本次调用；如果 timer 为空，则开启定时器，到期后执行并重置 timer = null：

/**
 * 节流实现：定时器法
 * 特征：第一次触发不会立刻执行，而是延迟 wait 毫秒后执行（trailing）；停止触发后能保证最后一次被执行
 */
function throttleTimer(fn, wait = 300) {
  let timer = null; // 闭包存储当前定时器句柄

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

    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(context, args);
        timer = null; // 定时器跑完后清空，解除锁定
      }, wait);
    }
  };
}

3. 生产级双兼顾实现：精准计算剩余时间

在日常生产实践中，单用时间戳无法执行停止操作后的最后一次状态（比如用户停止滚动后最后的停留点），而单用定时器则无法在用户第一次按下鼠标时立刻给予视觉响应。因此，成熟的节流实现通常融合两者，精准计算当前剩余等待时间 remaining：

/**
 * 生产级节流实现：兼顾首尾响应
 * @param {Function} fn 目标函数
 * @param {number} wait 节流周期
 */
function throttle(fn, wait = 300) {
  let timer = null;
  let lastTime = 0;

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

    // 计算距离下一次允许执行的剩余时间
    const remaining = wait - (now - lastTime);

    // 情况一：距离上次执行已超过 wait（或系统时间异常回调）
    if (remaining <= 0 || remaining > wait) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      fn.apply(context, args);
      lastTime = now;
    } else if (!timer) {
      // 情况二：尚未达到执行周期，且没有定时器时，设定一个延时任务来兜底最后一次动作
      timer = setTimeout(() => {
        lastTime = Date.now();
        timer = null;
        fn.apply(context, args);
      }, remaining);
    }
  };

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

  return throttled;
}

四、关键细节与避坑指南

手写闭包防抖与节流并不难，但在严苛的业务工程落地中，有几个细节如果处理不当，很容易引入隐蔽的 Bug：

五、防抖与节流的应用选型与全景总结

在实际项目中，决定使用防抖还是节流，核心取决于你的业务需求是“只要最后一次的静止结果”，还是“需要均匀持续的过程感知”。

对比维度	函数防抖（Debounce）	函数节流（Throttle）
核心行为	不断打断重置倒计时，静止后只触发一次	稀释调用频率，固定时间间隔内只执行一次
闭包维护核心	let timer = null 定时器 ID	lastTime 时间戳 或 timer 锁状态
高频持续输入时	一直静默，中途不执行任何业务逻辑	按恒定周期规律性持续执行
典型适用场景	搜索框输入联想、窗口尺寸改变（Resize）、表单防止重复点击	页面滚动瀑布流触底检测、鼠标移动/拖拽轨迹绘制、播放进度定时汇报

总结而言，JavaScript 闭包通过“词法作用域保留”的机制，在不污染全局命名空间的前提下，为每次防抖与节流实例创建了独立、安全的私有状态驻留空间。掌握闭包变量的内存引用机制、this 与参数的透明透传、以及首尾执行时序的差异，你便能游刃有余地在高频交互场景下写出高性能、高质量的前端代码。