异步防抖需将防抖逻辑与请求生命周期绑定，用input事件动态读取最新值，配合AbortController中止旧请求，并在组件卸载时清理，200～400ms（推荐300ms）为最优延迟。

直接说结论：异步防抖不是单纯“等用户停手再发请求”，而是把防抖逻辑和请求生命周期绑定，既压请求次数，又确保只有最后一次输入对应的结果能更新 UI——这才是规避竞态异常的核心。

必须用 input 事件 + 动态取值

keyup 会漏掉粘贴、中文输入法上屏、语音输入等场景，导致防抖失效。input 事件捕获所有值变更，但要注意不能在闭包里固定 value：

• 错误写法：debounce(() => fetch(`/api?q=${input.value}`), 300) —— 防抖函数创建时就锁死了初始值
• 正确写法：debounce(() => fetch(`/api?q=${encodeURIComponent(input.value)}`), 300) —— 每次执行都读最新 value

防抖本身不解决竞态，必须配 AbortController

基础防抖只清除定时器，但前一个 fetch 还在 pending 状态，可能后返回并覆盖 UI。要真正避免竞态，每次新请求发起前必须中止旧请求：

• 用 同一个 AbortController 实例管理当前活跃请求
• 每次调用防抖函数前先 controller.abort()，再新建 controller 并传入 signal
• catch 中过滤 AbortError，避免报错干扰

wait 时间设在 200～400ms 最稳

这个区间平衡了响应及时性与防抖有效性：

• 低于 200ms：用户打字稍快（如每秒 5 字），仍可能触发多次请求
• 高于 400ms：输完“react”按回车前停顿一下，建议框延迟出现，体验断层
• 实测中，300ms 覆盖绝大多数桌面端和主流安卓输入法节奏

别忘了组件卸载时的清理

React/Vue 等框架中，如果请求还没返回组件就卸载了，继续 setState 或更新状态会报 warning，甚至引发内存泄漏：

• React 中可在 useEffect 清理函数里调用 controller.abort()
• Vue 中在 beforeUnmount 或 onBeforeUnmount 钩子中做同样操作
• 不依赖框架时，可用布尔标志位判断组件是否存活，但 AbortController 更可靠