如何使用闭包与定时器编写高复用性的前端防抖组件实战

核心在于用闭包封装timer和配置，使每次调用debounce生成独立、可复用、上下文安全的函数实例；通过apply还原this和参数，暴露cancel/flush方法，并支持leading触发。

核心在于用闭包封装 timer 和配置，让每次调用 debounce 都生成一个独立、可复用、上下文安全的函数实例。

闭包是状态容器，不是装饰器

防抖不是给函数“加一层壳”，而是创建一个新函数，它通过闭包持续持有自己的 timer、delay、leading 等配置。这些变量不会被外部干扰，也不会在多次调用中互相覆盖。

• timer 必须声明在 debounce 外层函数内，只初始化一次
• 返回的函数每次执行，都读写同一个 timer 引用，clearTimeout 才真正有效
• 多个输入框共用同一份 debounce 代码，却各自维护自己的计时逻辑

支持 this 和参数传递的最小可靠结构

原生事件监听中，this 指向触发元素，arguments 是事件对象。若不处理，fn 内部会丢失上下文和数据。

• 用 apply(this, arguments) 还原执行时的 this 和全部实参
• 避免直接写 fn()，那会让 this 指向 window 或 undefined（严格模式）
• 不要用箭头函数包裹 setTimeout 回调后直接调用 fn()，它不解决 this 问题

添加 cancel 和 flush 方法提升可控性

真实场景中，组件卸载、表单重置或用户主动提交时，需要中断等待中的防抖任务。

立即学习“前端免费学习笔记（深入）”；

• 暴露 cancel()：清除当前 timer，重置状态，防止内存泄漏
• 暴露 flush()：立即触发待执行的回调（跳过剩余延迟），适合“立刻搜索”按钮
• 这两个方法也靠闭包访问同一个 timer 和 pending 状态，无需额外传参

带 leading 支持的增强版写法

有些交互要求“首次触发立刻执行，后续仍防抖”，比如点击展开面板时清空历史+聚焦输入框。

• 用布尔值 isInvoked 标记是否已执行过首次调用
• 配合时间戳判断是否处于 wait 窗口内，避免重复触发
• leading 和 trailing 可同时启用，但需注意逻辑互斥点（如 flush 应忽略 leading 标志）