HTML内联事件（如onclick）无法实现防抖/节流，必须用addEventListener配合JavaScript闭包函数；根本原因是内联执行破坏作用域链，导致timeout状态无法保持。
直接说结论：HTML 本身不支持防抖或节流，onclick、oninput 这类内联事件写法无法正确实现防抖/节流，必须用 addEventListener + JavaScript 函数封装。
为什么 onclick="debounce(fn, 300)()" 会失效
浏览器解析内联事件时，是把字符串当代码 eval 执行的，每次触发都新建作用域 —— timeout 变量无法跨次保留，clearTimeout 拿不到上一次的 ID，防抖逻辑彻底崩坏。
常见错误现象包括：
-
ReferenceError: debounce is not defined（函数没挂到window上） - 输入框每打一个字都立刻触发，完全没延迟
- 按钮连点多次，依然发起多次请求
根本原因不是函数写错了，而是绑定方式错了。所有可靠实现都依赖闭包维持状态，而内联写法天然破坏闭包。
立即学习“前端免费学习笔记（深入）”；
input 输入框防抖必须监听 input 事件
别用 change，它只在失焦时触发，对实时搜索毫无意义；也别用 keyup，漏掉粘贴、剪切、语音输入等非键盘操作。
正确做法：
- 用
addEventListener('input', debouncedHandler) - 防抖函数里必须用
func.apply(this, arguments)或func(...arguments)透传this和参数 - 如果需要首次输入立即执行（比如“输入即提示”），得加
immediate参数分支
示例片段：
const searchInput = document.getElementById('search');
const debouncedFetch = debounce(fetchSuggestions, 400, true); // true 表示 immediate
searchInput.addEventListener('input', debouncedFetch);滚动/resize 场景该选节流还是防抖
滚动监听要的是“过程反馈”，不是“最终结果”——用户拖动过程中就得定期采样位置，所以节流更合适；而窗口 resize 后只需最终尺寸，防抖反而更稳。
节流两种实现影响行为：
- 时间戳版（推荐用于 scroll）：
if (now - lastTime > delay) { fn(); lastTime = now; }→ 首次触发立刻执行 - 定时器版（适合按钮提交）：
if (!inThrottle) { fn(); inThrottle = true; setTimeout(() => inThrottle = false, delay); }→ 尾部执行，更克制
注意：滚动事件加 { passive: true } 能避免主线程阻塞，但此时不能调用 preventDefault() —— 如果你依赖阻止默认行为，就得放弃 passive。
手写 debounce 必须处理的三个坑
很多抄来的代码跑不通，就卡在这三处：
-
this指向丢失：不能写setTimeout(fn, delay)，得用setTimeout(() => fn.apply(context, args), delay) - 参数未透传：
arguments是类数组，需展开或用 rest 参数(...args) - 返回值丢失：如果原函数有返回值（比如 Promise），防抖函数也应返回它，否则 await 会失效
最简健壮写法：
function debounce(fn, delay, immediate = false) {
let timeout = null;
return function(...args) {
const later = () => fn.apply(this, args);
if (immediate && !timeout) fn.apply(this, args);
clearTimeout(timeout);
timeout = setTimeout(later, delay);
};
}复杂点在于上下文和参数传递，容易被忽略的地方是：防抖函数返回的新函数，本身也要能被正确调用并返回值，否则在异步链中会断掉。**这不是锦上添花，是实际业务里踩过坑才明白的刚需。**
