html内联事件写法无法实现防抖或节流，因其每次触发都新建作用域，无法维持timeout等状态；必须用addeventlistener配合闭包封装函数。
HTML内联事件写法根本不能做防抖或节流
直接说结论：onclick="debounce(fn, 300)()" 这类写法必然失效，不是函数没写对，而是 HTML 解析机制决定了它不可能维持状态。浏览器把内联属性当字符串 eval 执行，每次触发都新建作用域，timeout 变量无法跨次保留，clearTimeout 拿不到上一次 ID，整个逻辑就断了。
常见错误现象包括：
-
ReferenceError: debounce is not defined（函数没挂到window上） - 输入框每打一个字都立刻触发，完全没延迟
- 按钮连点多次，依然发起多次请求
所有可靠实现必须用 addEventListener + 闭包封装函数，这是唯一能保持 timeout 或 lastTime 状态的方式。
input 输入防抖必须监听 input 事件
别用 change，它只在失焦时触发，对实时搜索毫无意义；也别用 keyup，会漏掉粘贴、剪切、语音输入、拖拽文本等非键盘操作。
正确做法是：
- 绑定
addEventListener('input', debouncedHandler) - 防抖函数里必须用
func.apply(this, arguments)透传this和参数，否则this指向丢失 - 如需“首次输入立即执行”（比如输入即提示），得加
immediate参数分支
示例片段：
const searchInput = document.getElementById('search');
const debouncedFetch = debounce(fetchSuggestions, 400, true); // true 表示 immediate
searchInput.addEventListener('input', debouncedFetch);
resize 和 scroll 场景该选防抖还是节流
窗口 resize 后只需最终尺寸，用防抖更稳；滚动 scroll 要的是过程反馈（比如判断是否接近底部），节流更合适。
节流两种实现影响行为：
- 时间戳版（推荐用于
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) - 没清空上一次的
timeout，导致多次定时器并发执行 - 没把
arguments正确传入原函数，比如漏掉fn.apply(this, arguments)中的arguments
最易被忽略的是：防抖/节流函数返回的必须是新函数，且这个新函数要能持续访问闭包内的 timeout 或 lastTime —— 内联写法天然破坏这个前提，这点不理解，后面所有优化都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
