React Native 搜索防抖还会显示旧结果？给响应加一道门

专题：输入与交互

输入“React”后马上改成“React Native”，后一个请求先回来，前一个慢响应却最后覆盖了页面。防抖减少了请求数量，却没有规定响应的提交顺序。

先理解问题

搜索结果必须属于当前查询意图。防抖控制发起频率，请求身份控制谁能写入界面；两者职责互补，取消请求则用于节约无用工作。

实现路径

1. 每次输入变化都使旧查询失效，而不是等新请求真正发出才失效。
2. 延迟到期后捕获查询身份，成功和失败分支都先检查身份。
3. 卸载时取消延迟任务并失效在途请求；空查询也要立即清空或恢复默认结果。

核心示例

letintent=0;functionchangeQuery(){return++intent;}asyncfunctionsearch(ticket,query,load,commit){constresult=awaitload(query);if(ticket===intent)commit(result);}

这是单控制器内的 JavaScript 教学片段，load 与 commit 为注入函数，错误分支也应遵循同一门禁。不要把 intent 做成所有搜索框共享的模块变量；每个独立搜索会话应拥有自己的控制器。防抖时间由输入体验和接口成本决定，不能拿一个固定数字当性能保证。

怎么验证

• 让旧查询晚返回：不会覆盖新结果。
• 清空输入后旧请求返回：不重新填上旧内容。
• 快速输入时请求数减少，但最新查询最终得到结果。

适用范围与参考

示例用于说明设计与排查方法，非完整应用，也不代表已经过设备实测。 组件片段需接入对应项目；文中自定义函数、示意协议和策略数值需按业务补齐。迁移到 OHOS 时应另外核对适配层支持。

• 相关官方文档与接口背景