关于实时检索结果错误的调查
问题
用一个例子来描述吧,当用户输入关键词A,触发了检索,一秒钟后,用户输入了关键词 B,触发了检索,这时A检索结果回来了,呈现出来了列表展示,用户诧异,为何输入的B,返回了A结果,再过一会儿B结果回来。用户在可视化的情况下,看到了错误的结果,紧接着看到了正确的结果。
问题思考
接口慢是个问题,但是除了接口慢,也可以看到整个的实时检索存在设计缺陷。
- 当触发了第二次请求时,第一次请求如果还在请求中应该中断,这样对于开销来说小一些
- 用户之所以会误认为A结果集是用户输入B的结果,还有一个问题是,是否当执行B检索时,就不应该呈现结果集,通过loading等形式呈现给用户还正在检索
百度的实时检索
百度比如输入关键词时,推荐列表并没有loading动画,我想根本原因是因为足够的快,所以不需要有loading
请求取消对后端的影响
如上,当我们取消了一个已经发出的请求,但是因为请求本身是个异步的过程,所以后端还是会把这个请求处理流程走完
。所以严格来说,我们取消了请求,对于前端的开销有所减小,但是对于后端无任何影响。
解决方案
执行新的请求时,如果老的请求还在进行,进行取消
前端的请求类库,我使用的
axios
,而本身类库提供了cancel的方案,所以在全局拦截器里进行下配置即可。具体代码可参考这里执行请求时,增加loading显示,让用户意识到当前的结果集是历史的,最新的正在检索中
写在最后
经过以上的方案处理,总结下。
- 不会呈现错误的结果给用户
- 支持了取消pending请求,节约了一定的前端性能开销
- 除了上述的两点,也可以对于检索增加防抖处理,比如延迟1秒执行检索,确保高频输入不触发额外的检索。