防抖函数必须将event作为参数传入而非闭包捕获，因延时执行时原始event已失效；正确做法是立即接收event并传入setTimeout回调，或提取关键属性快照以避免DOM变化影响。
防抖函数里直接访问 Event 对象，关键在于把事件对象作为参数传进防抖函数内部，而不是在闭包里“捕获”它——因为防抖延时执行时，原始事件早已结束，event 可能被回收或失效。
为什么不能在闭包里直接用 event？
常见错误写法是这样：
❌ 错误示例（event 在 setTimeout 里已失效）function debounce(fn, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
fn(); // 这里拿不到 event！
}, delay);
};
}
// 绑定时：input.addEventListener('input', debounce(handler, 300));
问题在于：闭包捕获的是函数定义时的词法环境，但 event 是每次事件触发时动态生成的，且只在事件处理函数执行期间有效。延迟执行时，event 对象通常已被浏览器释放或变为 null（尤其在某些浏览器或合成事件中）。
正确做法：把 event 当作参数透传进去
让防抖函数接收并保存当前事件，在延迟执行时原样传给目标函数：
function debounce(fn, delay) {
let timer;
return function(event) { // ✅ 接收 event 参数
clearTimeout(timer);
timer = setTimeout(() => {
fn(event); // ✅ 延迟时仍可使用该 event
}, delay);
};
}
// 使用：
input.addEventListener('input', debounce(function(event) {
console.log(event.target.value); // ✅ 正常访问
}, 300));
- 防抖包装函数必须声明形参（如
event），并在setTimeout回调中显式传入 - 如果 handler 还需要其他参数（如
this或自定义参数），可用...args+bind或箭头函数保持上下文 - 注意：
event的isTrusted、preventDefault等方法在延迟后仍可用，但部分属性（如target）可能因 DOM 变化而指向不同节点（需视具体场景判断是否需立即读取）
更健壮的写法：立即读取关键属性
若担心延迟期间 DOM 变化影响 event.target 等属性，可在事件触发瞬间提取所需数据：
function debounce(fn, delay) {
let timer;
return function(event) {
const { target, type, clientX, clientY } = event; // ✅ 立即解构保存
clearTimeout(timer);
timer = setTimeout(() => {
fn({ target, type, clientX, clientY }); // 传入快照对象
}, delay);
};
}
- 适合对
event属性稳定性要求高的场景（比如拖拽、点击坐标） - 避免在延迟回调中反复访问可能变动的 DOM 节点
- 不推荐深拷贝整个
event对象（不可枚举、有循环引用）
React 中的特别提醒
React 使用合成事件（SyntheticEvent），其对象池机制会导致 event 在事件处理函数返回后被回收：
- 必须调用
event.persist()才能在异步中安全使用（React 16.x） - React 17+ 已移除事件池，但为兼容性，仍建议在防抖前先读取关键字段
- 更推荐方式：在事件回调里提取值（如
e.target.value），再传给防抖函数
// React 推荐写法
const handleChange = useCallback(
debounce((value) => {
console.log('debounced value:', value);
}, 300),
[]
);
<input
onChange={(e) => handleChange(e.target.value)}
// ✅ 直接传 value，不传 event
/>
