函数防抖在搜索联想中将连续输入合并为最后一次稳定请求，300ms延迟兼顾效率与体验，需配合AbortController取消旧请求，并在组件卸载时清理定时器。
在搜索联想场景中，函数防抖的核心作用是把用户连续输入的多个“中间态”请求（如输“react”时触发的 “r”“re”“rea”“reac”“react”）合并为最后一次稳定输入后的单次请求，从而大幅削减无效调用。实测表明，合理配置下后端 API 调用量可降低约 80%，且用户完全感知不到卡顿。
延迟设为 300ms 是关键平衡点
这个数值不是随意取的，而是基于人机交互实测得出的生理响应窗口：
- 短于 200ms（如 100ms），无法覆盖多数连续输入节奏，仍会频繁触发；
- 长于 600ms（如 800ms），用户敲完“搜索词”后明显等待，破坏“所见即所得”的直觉；
- 300ms 能吞掉 92% 以上的输入流中间态，同时保证端到端延迟（防抖+请求+渲染）控制在 500ms 内，符合亚秒级响应标准；
- 可进阶优化：首字输入阶段（focus 后首次变化）临时降为 150ms，提升首条联想的响应速度。
必须配合 AbortController 取消旧请求
只做防抖却不取消前序请求，反而会让后端更忙——因为多个相似 query（如 “ai”“aic”“aio”）会并行执行，白白占用数据库连接和 CPU。
- 每次发起新请求前，检查是否存在未完成的 AbortController 实例，有则调用 abort()；
- fetch 请求需传入 { signal }，Axios 推荐使用 signal（v0.27+）而非已废弃的 cancelToken；
- 注意捕获 AbortError 并静默处理，避免它混入错误日志刷屏。
组件生命周期里不能漏掉三件事
防抖逻辑写对了，但没管好组件卸载，照样引发内存泄漏、重复请求或 this 错乱：
- 防抖函数必须定义在 setup 或组件顶层作用域，不能放在 watch 回调内部（否则每次监听都新建闭包，timer 不共享，防抖失效）；
- 使用 onBeforeUnmount（Vue） 或 useEffect 清理函数（React） 主动清除定时器；
- 搜索值为空（searchQuery.trim() === ''）时，跳过请求并清空联想列表，防止删光输入框还发一次空 query。
别把防抖当万能解药
它适合“等用户停手再行动”的场景，比如搜索联想、表单校验、窗口尺寸监听。但以下情况要换思路：
- 需要响应每一次按键（如快捷键组合、实时计数器），该用节流（throttle）或直接处理；
- 绑定的是 keydown 事件（比如回车提交），防抖会延迟确认动作，应改用点击按钮 + 防抖提交逻辑；
- 后端本身已有幂等或去重机制，前端防抖可适度放宽，重点保障语义正确性而非纯数量压降。
