实现防抖的自动补全

概述

自动补全的质量更多取决于纪律：同一时刻只有一个在途请求，用单调序号丢弃过期结果，并明确空态与加载态。若响应可能乱序，仅靠防抖并不足够。

关键步骤

1. 在发起请求前对输入做短延时防抖。
2. 新请求开始时中止上一个在途请求。
3. 为每个请求标记序号，忽略旧于最新结果的响应。
4. 渲染加载态、空态，并限制建议条数。

验证

• 快速输入时在停顿后最多只发一个请求。
• 只渲染最新查询的结果。
• 空查询会清空下拉框。
• 被取消的请求不显示错误。

注意事项

• 防抖会引入延迟；服务端很快时较短的延迟或节流手感更好。
• 服务端排序质量比客户端时序更关键，无法靠防抖弥补。

适用范围

本条目围绕「实现防抖的自动补全」给出可复制的步骤、验证方式与常见问题，适合需要按此流程落地的工程团队。执行时请结合自身上下文调整命令与阈值，并在变更前后留存证据，便于后续复核与回滚。

建议在正式环境落地前先在预发或隔离环境演练一遍，把关键观测指标与负责人一并记录，确保出现异常时能快速定位并恢复。

let seq = 0;
async function search(q) {
  const my = ++seq;
  const data = await (await fetch(`/api/search?q=${encodeURIComponent(q)}`)).json();
  if (my === seq) render(data);
}