防抖函数的核心是只执行最后一次触发的操作,通过闭包保存定时器引用,每次触发先清除旧定时器再设置新定时器;标准实现需接收func和wait参数,返回函数中用cleartimeout和settimeout控制执行时机;增强版支持immediate模式和cancel方法。

防抖函数的核心是:在事件被频繁触发时,只执行最后一次触发的操作,中间的触发全部忽略。它依赖闭包保存定时器引用,避免多次重复设置或误清除。
理解防抖的基本逻辑
用户连续操作(如调整窗口大小、输入搜索关键词)会高频触发回调,但真正需要响应的往往只是“停止操作后的那一刻”。防抖通过每次触发时先清除旧定时器、再设置新定时器来实现延迟执行,确保只有最后一次触发生效。
手写一个标准防抖函数
关键点在于利用闭包让 timer 变量在多次调用间保持引用,不被释放:
- 接收两个参数:要包装的函数 func 和延迟时间 wait
- 返回一个新函数,在其中用 clearTimeout 清除上一次未执行的定时器
- 用 setTimeout 设置新的延迟执行,并把 func 的 this 和参数正确传递过去
function debounce(func, wait) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), wait);
};
}
支持立即执行与取消功能的增强版
实际项目中常需两种模式:一是首次触发立刻执行、后续触发防抖(leading);二是提供手动取消方法(cancel),用于组件卸载等场景:
- 加一个 immediate 参数控制是否立即执行
- 在返回的函数上挂载 cancel 方法,用于清除当前 pending 的定时器
- 注意区分 leading 和 trailing:前者在第一次触发时就运行,后者等停顿后才运行(默认)
使用时要注意 this 和参数绑定
直接调用防抖函数返回的新函数时,this 指向可能丢失。常见解决方式有:
- 用 func.apply(this, args) 显式绑定上下文
- 或用箭头函数配合 ...args 展开参数,再用 call 或 bind
- 若传入的是类方法,建议在构造函数中用 debounce(this.method, delay).bind(this) 或使用 class fields 语法预先绑定
不复杂但容易忽略。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











