异步防抖需将防抖逻辑与请求生命周期绑定，用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 更可靠
