防抖核心是“等用户打完再查”，300ms为平衡点；需清除定时器、校验timer、封装可取消请求；配合加载态提示、空状态处理与关键词高亮；本地过滤时还应防渲染抖动。

实时搜索过滤加防抖，核心是“等用户打完再查”，而不是“每敲一个字就发一次请求”。它不改变功能逻辑，但能大幅降低无效请求、避免界面卡顿、提升响应一致性。

防抖怎么设才不卡也不慢

300ms 是多数场景的平衡点：短于 200ms 容易误判为“还在输入”，长于 500ms 用户会感知延迟。实测中，中文输入平均单字间隔约 250–350ms，300ms 能覆盖绝大多数停顿习惯。若搜索数据来自本地（比如千条以内的列表），可压到 150ms；若是远程 API，建议保持 300–400ms，并配合加载态提示。

防抖函数不能只套代码，得管住“幽灵请求”

常见错误是只清定时器，却不拦截已入队但未执行的回调。真实项目中，用户快速连输“北京朝阳区”时，若防抖实现不严谨，可能在停止输入后连续触发 5 次旧请求。正确做法是：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• 每次新输入前，先 clearTimeout，再重置 timer = null
• 在 setTimeout 回调里加一层校验：if (timer === null) return，确保只执行最后一次设定的回调
• 对搜索函数做 cancelable 封装，支持手动中断正在执行的 fetch 请求（如用 AbortController）

和 UI 反馈一起用，体验才完整

光防抖不够，用户需要明确感知“系统正在响应”。建议同步做三件事：

• 输入中显示旋转加载图标或“搜索中…”文字，但仅在防抖计时结束、请求真正发出后才展示
• 空关键词或无结果时，渲染清晰的提示语（如“请输入关键词”“没找到匹配项”），不要留白或闪动
• 若支持模糊匹配，高亮结果中的关键词（用 或 span 包裹），增强视觉反馈

本地过滤场景下，防抖还能再省一层开销

当数据量小（≤1000 条）、全部加载在前端时，搜索本质是数组 filter + includes 或正则匹配。这时防抖的作用不仅是减请求，更是避 DOM 频繁重绘：

• 把渲染逻辑（如 innerHTML 更新或 React setState）也包进防抖函数内，避免每输一个字都触发一次 render
• 对长文本截断+高亮做 memoize 处理，相同关键词重复输入不重复计算
• 启用 requestIdleCallback 延迟非关键渲染，保证主交互流畅