防抖的核心是“每次新操作都重置倒计时，确保只执行最后一次”，闭包通过持久化保存timeoutid和pendingargs实现状态延续、安全清理及参数暂存，并支持与组件生命周期配合自动卸载清理。
防抖的核心不是“等停了再执行”，而是“每次新操作都重置倒计时，确保只执行最后一次”。闭包在这里的作用，是把定时器 ID（timeoutId）稳稳锁在函数作用域里，不让它丢失、不被误删，也不暴露给外部随意操作。
闭包保存 timeoutId，保证状态可延续
每次调用防抖函数时，都要取消上一次未执行的定时器。如果 timeoutId 是局部变量，那每次调用都会新建一个，旧的就找不到了；而放在闭包里，它就像一个私有“记事本”，跨多次调用仍保持引用。
- 声明一个
let timeoutId = null在闭包最外层，所有内部方法共享这一个变量 -
invoke()或start()执行时，先clearTimeout(timeoutId)，再赋新值 -
cancel()只需清空当前timeoutId，无需关心它是否为 null
支持参数暂存，让回调真正“延迟执行”
用户连续输入时，你可能需要把最后一次的输入值传给回调。光清定时器不够，还得把参数存下来——闭包同样能安全承载这个临时数据。
- 在闭包中额外声明
let pendingArgs = null - 每次
invoke(...args)都更新pendingArgs，并重设定时器 - 回调函数里直接使用
pendingArgs，而不是依赖闭包外随时变化的变量
与组件生命周期配合，避免卸载后触发
React 或 Vue 中，组件销毁时必须清理定时器，否则会调用已不存在的 setState 或 this.setState。闭包本身不自动绑定生命周期，但它让清理动作变得明确、可控。
- 在
useEffect的清理函数里调用闭包返回的cancel() - 不要在组件内直接调用
clearTimeout，避免重复或遗漏 - 如果防抖逻辑封装成 Hook（如
useDebounceFn），内部就应自带清理能力
防抖定时器的最小可用结构示例
下面是一个轻量但完整的闭包实现：
function createDebouncedFn(fn, delay) {let timeoutId = null;
return function (...args) {
if (timeoutId !== null) clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
fn(...args);
timeoutId = null;
}, delay);
};
}
它靠闭包维持 timeoutId，每次调用都先清旧再设新，天然具备精确清除能力。
