oninput内联写防抖无效，因无法维持定时器状态、丢失this和参数、clearTimeout失效，且不支持composition事件处理；必须用addEventListener绑定，并手动处理输入法状态。
直接在 oninput 属性里写防抖函数没用，因为 HTML 内联事件无法维持定时器状态、会丢失 this 和参数，且每次触发都重新解析字符串，clearTimeout 失效。
为什么 oninput="debounce(fn, 300)()" 不工作
浏览器把内联属性当字符串执行，相当于每次输入都调用一次 debounce()，返回一个新函数再立即执行——但这个函数内部的 timeout 变量是局部的，上一次的定时器 ID 完全不可访问。结果就是：防抖逻辑形同虚设，控制台还可能报 ReferenceError: debounce is not defined（除非你把它挂到 window 上，但这是反模式）。
- 内联写法无法形成闭包，
timeout变量不能跨次保留 -
this指向window或undefined（严格模式），不是目标input元素 - 参数无法透传：比如想把
event或input.value传给业务函数，内联方式做不到 - 移动端中文输入法的
compositionstart/compositionend事件完全无法监听和协调
必须用 addEventListener 绑定 input 事件
这是唯一能稳定维持闭包、正确传递上下文和参数的方式。防抖函数要返回一个新函数，这个函数被绑定到事件系统后，才能复用同一个 timeout 变量。
- 监听
input事件，不是change（后者只在失焦时触发，无法实时响应） - 手动处理中文输入法：在
compositionstart时标记isComposing = true，compositionend后再触发防抖逻辑，避免拼音阶段误触发 - 防抖函数内部必须用
fn.apply(this, arguments)或fn.call(this, ...args)，否则this会丢失 - 如果业务函数有返回值（如校验结果），防抖函数也应支持返回，虽然事件处理器通常不消费它
手写防抖函数三个必填细节
漏掉任意一点，就可能导致 this 错乱、参数为空、首次输入不响应等线上问题。
立即学习“前端免费学习笔记（深入）”；
-
setTimeout回调里不能直接调用fn()，必须用fn.apply(this, arguments)保证上下文和参数完整 - 需要支持
immediate参数：设为true时首次触发立刻执行，后续在间隔内重复触发则不执行；设为false（默认）则等停顿后再执行最后一次 - 必须返回原函数的执行结果（哪怕只是
undefined），否则像reportValidity()这类需要返回布尔值的校验逻辑会失效
移动端中文输入法的兼容处理
用户在 iOS 或安卓软键盘下输入中文时，input 事件会在拼音未确认阶段频繁触发，导致防抖提前跑偏。必须配合输入法事件生命周期来抑制。
- 监听同一元素上的
compositionstart、compositionupdate、compositionend - 在
compositionstart时设isComposing = true，暂停防抖计时 - 在
compositionend后立即触发一次防抖函数（模拟“确认完成”），而不是等input自动来 - 不要在
compositionupdate中做任何业务逻辑，它只代表候选词变化，不是最终值
防抖真正难的不是写个 setTimeout，而是让 this、参数、输入法状态、首次执行时机全部对齐。这些细节在 PC 端可能不明显，但一上真机或中日韩语境就立刻暴露。别跳过 composition 事件监听，也别图省事往 window 上挂函数。
