实时搜索防抖需延迟控制（300ms平衡点）、AbortController取消旧请求、空值校验与组件卸载清理三者协同，可降负载80%且无感知；keydown等需即时响应场景应改用节流。

在实时搜索场景中，用函数防抖把后端接口负载压下来，同时不卡顿、不丢响应，关键不是“加个 delay 就完事”，而是延迟控制 + 请求管理 + 生命周期兜底三者配合。实测可降负载 80%，且用户完全无感知。

设对延迟值：300ms 是平衡点，不是随便写的

300ms 不是拍脑袋定的——它落在人对“即时反馈”的容忍阈值内。输入“react”这种常见词，6 个字符之间平均间隔约 220ms，300ms 足以吞掉中间所有无效态；后端平均响应 200ms，端到端约 500ms，仍在亚秒级体验范围内。

• 低于 200ms（比如 100ms），起不到合并效果，快速连打仍会发多次请求
• 高于 500ms（比如 800ms），用户敲完回看，结果还没出来，直觉上就“卡了”
• 进阶做法：首字触发时可临时降到 150ms（强化联想速度），后续自动切回 300ms

必须搭配 AbortController：否则防抖反而加重后端压力

只做防抖不取消旧请求，等于给后端堆任务：用户输 “abc” → 发请求 A；还没返回又改成 “abcd” → 防抖后发请求 B，但 A 还在跑。两个相似 query 同时查库，CPU 和连接数白耗。

• 每次调用防抖函数前，检查是否存在未 abort 的 AbortController 实例，有则先调 abort()
• fetch 请求传 { signal }，Axios 用 signal（v0.27+）或 cancelToken
• 注意：abort() 不抛错，但 fetch 会 reject 带 AbortError，catch 中要过滤，避免日志刷屏

空值校验和组件卸载清理不能漏

这两处漏掉，轻则白发请求、重则内存泄漏，防抖效果直接归零。

• 输入框清空时，searchQuery.trim() === '' 必须跳过请求，并清空结果列表——否则删光内容还发一次空 query
• Vue 里用 onBeforeUnmount，React 用 effect cleanup 函数，手动 clearTimeout
• 防抖函数别写在 watch 或 useEffect 回调内部——每次触发都新建闭包，timer 不共享，防抖失效；应提至 setup 或组件顶层作用域

什么时候不该硬套防抖？识别节流场景

防抖适合“等用户停下来再动作”的场景，但有些事件本身就不该等停：

• 如果搜索框监听的是 keydown（比如支持回车立即提交），防抖会让回车失效——这时更适合节流或条件触发
• 滚动中动态计算联想框位置、拖拽实时预览等，需要稳定频率响应，节流比防抖更合适
• 输入法上屏（IME）期间 input 事件密集，300ms 防抖能自然吞掉中间组合过程，这点反而是优势