JS 中怎么用闭包实现防抖（Debounce）函数-js教程-PHP中文网

闭包是实现防抖函数的核心机制，它通过维持外层函数中 timer 变量的引用，使定时器可被持续访问与清除；基础版用 apply 保证 this 和参数传递，增强版支持 immediate 和 cancel 方法。

js 中怎么用闭包实现防抖（debounce）函数

闭包是实现防抖函数的核心机制，它让内部定时器引用能持续保留在内存中，不被销毁，从而在新调用到来时可以清除旧定时器、重设新定时器。

防抖函数的基本结构：用闭包保存 timer

每次调用防抖函数返回的新函数时，都会访问外层作用域中同一个 timer 变量。这个变量由闭包维持，不会随调用结束而释放。

外层函数接收 fn 和 delay，返回一个“包装后”的函数
返回的函数内部使用 clearTimeout 清除上一次的定时器（如果存在）
再用 setTimeout 设置新的延时执行

基础版防抖（支持 this 和参数传递）

原生事件或普通调用中，需要正确绑定上下文和透传参数，否则 this 会丢失、参数收不到。

Browser Js

轻量级CDP浏览器控制，适用于AI代理。相较于内置浏览器工具，token消耗降低3‑10倍，仅在浏览时使用。

下载

用 func.apply(thisArg, args) 保证 this 和参数正确传递
闭包捕获 fn、delay，内部维护唯一 timer

示例代码：

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    const self = this;
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(self, args);
    }, delay);
  };
}

增强版：支持立即执行（leading）和取消（cancel）

实际项目中常需更灵活控制——比如首次触发立刻执行，或手动清空等待中的任务。

加 immediate 参数：为 true 时首次调用立即执行，后续仍按 delay 防抖
给返回的函数挂载 cancel 方法，用于外部主动终止待执行逻辑
闭包内仍只维护一个 timer，但状态判断逻辑稍复杂

常见写法：

function debounce(fn, delay, immediate = false) {
  let timer = null;
  const debounced = function(...args) {
    const callNow = immediate && !timer;
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      if (!immediate) {
        fn.apply(this, args);
      }
    }, delay);
    if (callNow) {
      fn.apply(this, args);
    }
  };
  debounced.cancel = () => {
    clearTimeout(timer);
    timer = null;
  };
  return debounced;
}