内联事件如onclick="debounce(fn,300)()"会失效，因每次触发都重新解析字符串，无法保持闭包中的timer状态，且this丢失、参数不透传；必须用addeventlistener绑定预先定义的防抖函数。
HTML 本身不支持防抖，debounce 是 JavaScript 行为，必须通过 JS 绑定事件才能生效；直接写 onclick="debounce(fn, 300)()" 或 oninput="debounce(...)" 会失效——因为内联属性每次执行都重新解析字符串，闭包里的 timer 变量无法保留，clearTimeout 失效，等于没防抖。
为什么 onclick/oninput 写 debounce 会失效
浏览器对内联事件（如 onclick）的处理本质是 eval 字符串，函数调用不维持作用域链：
-
debounce返回的是一个闭包函数，依赖内部timer变量跨次访问；内联写法每次触发都新建作用域，上一次的timer被丢弃 -
this指向丢失：内联中fn()的this是window或undefined（严格模式），不是绑定的 DOM 元素 - 参数无法透传：比如
event对象根本不会自动注入到内联字符串调用中 - 控制台通常报
ReferenceError: debounce is not defined，除非你把函数挂到window上（不推荐）
必须用 addEventListener + 闭包函数绑定
这是唯一能保持 timer 状态、正确传递 this 和 arguments 的方式：
function debounce(fn, delay) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
const input = document.querySelector('#search');
input.addEventListener('input', debounce(function (e) {
console.log('搜索:', e.target.value);
}, 300));
- 注意：监听
input事件，不是change（后者只在失焦时触发） - 如果需兼容旧版 IE，避免用箭头函数，改用
function () { fn.call(this, arguments); } - 滚动/resize 场景建议加
{ passive: true }提升性能，但此时不能调用e.preventDefault()
手写 debounce 容易漏掉的三个关键点
很多手写实现跑起来“好像能用”，但实际在真实交互中出问题：
- 没用
fn.apply(this, arguments)或fn.call(this, ...args)—— 导致this指向错误，DOM 操作失败 - 没清空上一次定时器就直接
setTimeout(fn, delay)——timer变量未声明或未重置，多次触发后多个定时器并存 - 没处理立即执行（
immediate）逻辑 —— 如果需要“首次触发立刻执行、后续仍防抖”，得单独分支判断!timer并手动调用
最常被忽略的是：防抖函数返回的新函数必须被**同一个引用**反复调用，而不能每次 addEventListener 都传新 debounce(...) 实例——否则闭包变量还是断的。务必提前定义好 debounced 函数，再传入监听器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
