内联事件（如oninput、onclick）失效，因其本质是字符串执行，每次触发都重新解析，无法维持闭包中的timer变量，cleartimeout拿不到上一次定时器id；同时丢失this指向和事件参数，且不支持cancel、immediate等增强能力。
直接在 HTML 标签里写 oninput="debounce(...)" 是无效的，防抖必须用 addEventListener 绑定才能生效。
为什么 onclick/oninput 内联写法会失效
内联事件（如 onclick、oninput）本质是字符串执行，每次触发都重新解析，无法维持闭包中的 timer 变量；clearTimeout 拿不到上一次的定时器 ID，等于白写。浏览器控制台通常报 ReferenceError: debounce is not defined，除非你把函数挂到 window 上——但这是反模式，破坏封装且污染全局。
- 内联写法丢失
this指向和事件参数（event） - 每次调用都生成新函数，没绑定到事件流，只是立即执行返回值
- 无法支持取消（
cancel()）、立即执行（immediate: true）等增强能力
手写 debounce 必须处理的三个上下文问题
常见手写代码只清 timer、设 timeout，但漏掉关键细节，导致实际运行出错或行为异常：
- 必须用
fn.apply(this, arguments)或fn.call(this, ...args)透传this和全部参数，否则this指向window或undefined - 如果需要“首次触发立刻执行”，得加
immediate分支，并判断!timer而非只看timeout是否存在 - 原函数若有返回值（比如 Promise），防抖函数也应支持返回（虽然事件处理器通常不消费，但测试或链式调用时会暴露问题）
滚动/输入场景该用 debounce 还是 throttle
不是所有高频事件都适合防抖。输入搜索、表单提交这类“等用户停下来再干活”的场景，用 debounce 合理；但滚动监听、鼠标拖拽、实时位置反馈，用户一动就该有响应，防抖会导致明显卡顿或延迟感。
-
debounce：适合input、change、按钮重复点击（如提交） -
throttle（时间戳版）：适合scroll、mousemove、resize，首触发立即响应 - 注意：滚动监听务必加
{ passive: true }，否则 Chrome 会警告并降级性能
最易被忽略的是：防抖函数返回的新函数本身是“有状态”的，它依赖闭包保存 timer 和执行逻辑。一旦你把它赋给多个元素（比如多个 input），它们会共享同一个 timer 变量——除非你为每个元素单独调用 debounce(fn, delay) 生成独立实例。这点在批量初始化时特别容易踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
