JavaScript 中防抖函数怎么封装成高阶工具方法-js教程-PHP中文网

防抖函数封装为高阶工具方法，通过闭包保存timer状态，接收fn和wait参数，返回可复用函数；支持immediate配置与cancel方法，需注意this绑定和按需导出。

javascript 中防抖函数怎么封装成高阶工具方法

防抖函数封装成高阶工具方法，核心是用闭包保存定时器状态，返回一个可复用、带配置的新函数——它不修改原函数，也不污染原型，只负责控制执行时机。

基础结构：接收函数和延迟时间，返回定制化调用器

标准封装需两个参数：要包装的函数 fn 和延迟毫秒数 wait。返回的函数内部维护独立的 timer 变量，每次调用都清除旧定时器、设置新定时器：

利用闭包让 timer 在多次调用间持续存在，避免被垃圾回收
用 clearTimeout 清除上一次未执行的定时任务
用 setTimeout 延迟执行，并通过 func.apply(this, arguments) 正确传递上下文和所有参数

支持立即执行与手动取消

实际项目中常需更灵活的控制能力：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

加一个 immediate 布尔参数，区分首次触发是否立刻执行（leading）还是等停顿后执行（trailing，默认）
在返回的函数上挂载 cancel 方法，用于主动清空 pending 的定时器，比如组件卸载前调用
cancel 方法内部设 timer = null，并确保后续 setTimeout 不会误执行

注意 this 和参数的绑定方式

直接把防抖结果赋给事件监听器时，this 容易丢失：

若原函数是对象方法（如 obj.handleClick），建议在构造函数或初始化阶段就绑定：this.handleClick = debounce(this.handleClick, 300).bind(this)
现代写法可用 class fields 语法：handleClick = debounce(() => { ... }, 300)
避免在事件回调里现场调用 debounce(fn, ms)()，这会导致每次触发都新建闭包，timer 无法复用