闭包实现防抖函数的核心是为每个实例创建独立的timer变量，确保定时器互不干扰；通过外层作用域保存timer，返回的函数借助闭包访问专属timer，支持cancel方法和immediate模式。
用闭包实现防抖函数，核心是让每次调用都拥有自己独立的定时器引用（timer），避免相互覆盖或误清除。闭包天然能保存上层作用域的变量，所以把 timer 放在返回函数的外层作用域里，就能为每个防抖实例隔离状态。
闭包结构：返回一个带私有 timer 的函数
每次调用防抖工厂函数时，都会创建一个新的词法环境，其中的 timer 变量只被该次生成的防抖函数访问，互不干扰。
示例：
立即学习“Java免费学习笔记（深入）”；
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
function debounce(fn, delay) {
let timer = null; // ✅ 闭包变量：每个 debounce 调用独享一份
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
timer = null; // 可选：清空便于判断，非必须
}, delay);
};
}
<p>// 独立使用
const handleSearch = debounce(api.search, 300);
const handleResize = debounce(updateLayout, 250);</p><p>// 二者 timer 互不影响：搜索输入不会清掉布局调整的定时器
为什么不用全局或对象属性存 timer？
如果把 timer 放在全局、模块顶层或共享对象里，多个防抖调用会共用同一个 timer 引用，导致后调用的覆盖前调用的定时器，前一个逻辑可能永远不执行。
反例（❌ 错误）：
let globalTimer = null; // ❌ 所有调用共享！
function badDebounce(fn, delay) {
return function(...args) {
clearTimeout(globalTimer); // 清的是别人设的！
globalTimer = setTimeout(() => fn.apply(this, args), delay);
};
}
进阶：支持立即执行 + 取消能力
加个 immediate 参数，并暴露 cancel 方法，仍靠闭包维持状态独立性：
function debounce(fn, delay, immediate = false) {
let timer = null;
<p>const debounced = function (...args) {
const callNow = immediate && !timer;
if (timer) clearTimeout(timer);</p><pre class="brush:php;toolbar:false;">timer = setTimeout(() => {
timer = null;
if (!immediate) fn.apply(this, args);
}, delay);
if (callNow) fn.apply(this, args);};
// ✅ 通过闭包绑定当前 timer，每个 debounced 函数自带 cancel debounced.cancel = function () { if (timer) { clearTimeout(timer); timer = null; } };
return debounced; }
// 各自 cancel 互不影响 const a = debounce(console.log, 100); const b = debounce(console.log, 100); a.cancel(); // 只影响 a 的 timer b.cancel(); // 只影响 b 的 timer
实际应用注意点
- 确保每次需要独立防抖行为时，都调用一次
debounce()创建新函数，不要复用同一个返回函数去处理不同逻辑 - 在 React 等框架中，若在组件内定义防抖函数，需放在
useCallback或useRef中缓存，避免每次渲染重建导致事件处理器变更 - 不需要手动清理闭包中的
timer—— 当防抖函数被垃圾回收（如组件卸载且无引用），闭包及其中的timer自然释放
