闭包是实现防抖函数的核心机制，它通过维持外层函数中 timer 变量的引用，使定时器可被持续访问与清除；基础版用 apply 保证 this 和参数传递，增强版支持 immediate 和 cancel 方法。
闭包是实现防抖函数的核心机制，它让内部定时器引用能持续保留在内存中，不被销毁，从而在新调用到来时可以清除旧定时器、重设新定时器。
防抖函数的基本结构：用闭包保存 timer
每次调用防抖函数返回的新函数时，都会访问外层作用域中同一个 timer 变量。这个变量由闭包维持，不会随调用结束而释放。
- 外层函数接收
fn和delay，返回一个“包装后”的函数 - 返回的函数内部使用
clearTimeout清除上一次的定时器（如果存在） - 再用
setTimeout设置新的延时执行
基础版防抖（支持 this 和参数传递）
原生事件或普通调用中，需要正确绑定上下文和透传参数，否则 this 会丢失、参数收不到。
- 用
func.apply(thisArg, args)保证this和参数正确传递 - 闭包捕获
fn、delay，内部维护唯一timer
function debounce(fn, delay) {
let timer = null;
return function(...args) {
const self = this;
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(self, args);
}, delay);
};
}
增强版：支持立即执行（leading）和取消（cancel）
实际项目中常需更灵活控制——比如首次触发立刻执行，或手动清空等待中的任务。
- 加
immediate参数：为true时首次调用立即执行，后续仍按 delay 防抖 - 给返回的函数挂载
cancel方法，用于外部主动终止待执行逻辑 - 闭包内仍只维护一个
timer，但状态判断逻辑稍复杂
function debounce(fn, delay, immediate = false) {
let timer = null;
const debounced = function(...args) {
const callNow = immediate && !timer;
clearTimeout(timer);
timer = setTimeout(() => {
timer = null;
if (!immediate) {
fn.apply(this, args);
}
}, delay);
if (callNow) {
fn.apply(this, args);
}
};
debounced.cancel = () => {
clearTimeout(timer);
timer = null;
};
return debounced;
}
注意点：闭包带来的内存与 this 问题
闭包本身不会导致内存泄漏，但若防抖函数长期存在且 fn 引用大对象，可能间接延长对象生命周期。
- 避免在防抖函数里直接捕获大型数据结构（如整个 Vue 组件实例）
- 确保
this绑定符合预期——箭头函数不能改变 this，慎用于包装器内部 - 高频场景下建议配合
cancel在组件卸载时清理，防止异步回调执行在已销毁上下文中
