防抖和节流是JavaScript实现的事件响应控制机制，需通过addEventListener绑定以保持闭包状态；内联HTML写法因无法维持timeout变量、丢失this和参数而失效。
防抖和节流不是 HTML 本身的特性，而是 JavaScript 控制事件响应节奏的手段。HTML 只负责绑定事件（比如 onclick、oninput），真正做防抖/节流的是 JS 函数。
为什么直接在 HTML 属性里写 onclick="debounce(...)" 不行
HTML 内联事件处理器（如 onclick）执行时，函数是作为字符串被 eval 调用的，无法保留闭包状态 —— 而防抖依赖 timeout 变量持续存在，节流依赖 inThrottle 或时间戳跨次判断。一旦每次点击都重新解析字符串，上次的定时器 ID 就丢了，clearTimeout 失效，等于没防抖。
- 内联写法会丢失
this上下文和参数传递逻辑 -
debounce返回的是一个新函数，不能靠字符串调用“触发一次就生成一次” - 浏览器控制台会报
ReferenceError: debounce is not defined（除非你把函数挂到window上，但不推荐）
addEventListener 是唯一可靠入口
所有现代防抖/节流实现都必须通过 addEventListener 绑定，才能让闭包变量在多次事件中持续有效。
- 正确姿势：
btn.addEventListener('click', debounce(handleClick, 300)) - 错误姿势：
（执行了返回函数，但没绑定） - 输入框场景要监听
input事件，不是change（后者只在失焦时触发） - 滚动/鼠标移动等高频事件，务必用
addEventListener+{ passive: true }提升性能
手写 debounce 必须处理的三个细节
常见手写代码漏掉关键点，导致 this 指向错、参数传不进、立即执行失效。
- 必须用
func.apply(this, arguments)或func.call(this, ...args)保持原始上下文和参数 - 不能直接写
setTimeout(fn, delay)，否则this指向window或undefined（严格模式） - 如果需要“首次触发立刻执行”，得加
immediate参数分支，且要区分timeout是否已存在 - 别忘了返回值透传：如果原函数有返回值，防抖函数也应支持（虽然事件处理器通常不关心）
节流选时间戳还是定时器？看场景
两种主流实现方式行为不同，不能混用：
- 时间戳版（首触发立即执行）：记录上一次执行时间，当前时间减去它 > 间隔才执行。适合滚动监听、拖拽反馈等“动起来就要立刻响应”的场景
-
定时器版（尾触发延后执行）：用
setTimeout控制下次可执行时机。适合按钮防重复提交、搜索联想等“宁可稍晚也不能太早”的场景 - Lodash 的
throttle默认是时间戳 + 定时器双结合，保证首尾都覆盖；自己手写时得明确选一种 - 注意：节流函数内部不要直接修改传入的
fn，避免污染原始逻辑
最易被忽略的是：防抖/节流函数本身必须是稳定引用。如果每次渲染都重新定义（比如 React 里在组件函数体内直接写 debounce(...)），会导致事件监听器不断重绑，旧定时器永远清不干净 —— 这类内存泄漏在长期运行的单页应用里特别隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
