防抖需闭环“防抖+取消+清理”三步，否则后端负载不降反升、UI错乱；必须每次调用前abort旧请求、catch过滤AbortError、实时取输入值、组件卸载时清理定时器和controller。
防抖能压掉 90% 以上的无效搜索请求，但只套个 debounce 函数、设个 300 毫秒延迟，反而会让后端更忙、UI 更错乱——关键在「防抖 + 取消 + 清理」三步必须闭环。
为什么只用 debounce 会让后端负载不降反升
基础防抖只清定时器，不管还在跑的 fetch。用户输 “react” 的过程可能触发 5 次防抖调用，每次都会 new 一个 AbortController，但旧的 fetch 并没被 abort，全堆在 pending 队列里。后端同时处理 “re”、“rea”、“reac”、“react” 四个相似 query，DB 连接、CPU、缓存穿透全拉满。
- 必须在每次调用前检查并调用
controller.abort()，否则signal形同虚设 -
fetch收到 abort 会 reject 带AbortError，得在catch里显式过滤，不然控制台刷屏 - Axios 用户注意：
cancelToken已废弃，v0.27+ 必须用signal参数
input 事件里怎么安全取最新值
闭包锁死初始值是高频翻车点。比如把 searchQuery.value 当参数传进防抖函数，后续输入再变，func 拿到的还是第一次的值。
- 防抖包裹的函数体内，必须实时读取
input.value或响应式变量（如searchQuery.value） - Vue 中别在
watch回调里定义防抖函数——每次触发都新建闭包，timeoutId不共享，防抖失效 - React 中若用
useCallback包裹防抖函数，依赖数组里必须含searchQuery，否则闭包捕获过期值
组件卸载时不清定时器和 controller 就是内存泄漏
用户搜到一半切走，定时器还在跑，setTimeout 持有组件作用域引用，this 指向丢失，fetch 成功后 setState 或赋值会报错或静默失败。
- Vue：在
onBeforeUnmount里执行clearTimeout(timeoutId)和controller?.abort() - React：在
useEffect的 cleanup 函数里做同样清理 - 防抖函数不能定义在事件回调内部（如
@input="debounce(...)"），必须提至组件顶层作用域，确保 timer 和 controller 可被统一管理
wait 设成多少才不卡也不丢响应
300ms 是实测甜点值，不是玄学数字：它覆盖 92% 的连续输入间隔（如 “typescript” 各字符间平均间隔 ≤250ms），又低于人类对反馈延迟的容忍阈值（500ms 内为“瞬时”）。
- 首字联想可动态降为
150ms：用户刚聚焦输入框，打第一个字时，早一点出建议比等稳更重要 - 移动端慎用
keyup：无法捕获粘贴、语音输入、IME 上屏，必须用input事件 - 空值必须拦截：
searchQuery.value.trim() === ''时直接 return，否则删光输入框还发一次q=请求
真正卡住项目的，往往不是 debounce 写得对不对，而是 abort、清理、取值这三处漏掉任意一环——它们不出错，但会让优化效果归零，甚至负优化。
