无法通过html标签属性实现真正有效的防抖或节流，因为内联事件处理器每次触发都重新解析执行，导致timeout变量无法跨次保留、闭包状态丢失、this指向错误且参数无法透传，且debounce未挂载到window时会报referenceerror。
无法通过 HTML 标签属性（如 onclick、href）实现真正有效的防抖或节流。
为什么 onclick="debounce(...)" 一定失效
HTML 内联事件处理器本质是字符串求值，每次触发都重新解析执行，导致：
-
timeout变量无法跨次保留 ——clearTimeout总是操作一个不存在或已销毁的 ID - 闭包状态丢失，
debounce返回的新函数每次都是“全新实例”，不共享状态 -
this指向window或undefined，且参数无法透传（arguments不可用） - 浏览器控制台报
ReferenceError: debounce is not defined，除非你把函数挂到window上 —— 但这是反模式，污染全局作用域
用 addEventListener 绑定才是唯一可行路径
只有通过 JavaScript 显式绑定，才能维持闭包变量（如 timeout、inThrottle）在多次事件中持续有效。关键点：
- 防抖必须用
func.apply(this, arguments)保证上下文和参数正确传递 - 节流若选定时器版（推荐用于按钮防重复提交），需用
run = false+setTimeout(() => { run = true }, delay)控制开关 - 滚动/resize 等高频事件建议加
{ passive: true }提升性能，但注意：被动监听器内不能调用preventDefault() - 输入框防抖应监听
input事件，不是change（后者只在失焦时触发）
别掉进“伪防抖”的坑：直接在 href 或 location.href 上做文章
有人试图这样写：<a href="#" onclick="debounce(goToPage, 500)(); return false">跳转</a> —— 这看似调用了防抖，实则：
-
debounce(goToPage, 500)()是立即执行返回的函数，不是绑定；每次点击都新建一个防抖函数并立刻调用，毫无节制效果 - 没有闭包变量维持，等价于裸调用
goToPage - 若
goToPage内部含location.href = 'xxx'，仍会高频跳转，甚至触发浏览器安全限制（如弹窗拦截） - 真正的页面跳转防抖，应封装在事件处理器里，且跳转逻辑必须延迟执行并可取消（例如用
setTimeout+clearTimeout控制）
最易被忽略的一点：防抖/节流函数本身不处理跳转逻辑，它只是控制「何时执行跳转函数」。跳转是否成功、是否被用户中断、是否需要 loading 状态反馈 —— 这些都要在被包装的函数内部处理，不能指望防抖层兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
