【Ajax】多次异步请求的顺序以及回调处理问题

背景

通过搜索框进行检索:触发发送检索请求的事件是keyup,也就是当按完每个键之后发送一次检索请求。

问题

在输入框输入内容之后,快速地删减,有时会发现列表显示的数据和检索的关键字并不匹配;而缓慢地操作则不存在这个问题
比如输入“我是中国人”,列表的统计数显示20W条数据;而“我”,则显示有30W条数据;而当快速改变输入框内容时,这两个关键字检索出来的数据量有时不会和原来保持一致。

分析

通过浏览器工具查看发送的请求
【Ajax】多次异步请求的顺序以及回调处理问题
我们可以看到第3条请求最先发送,第1条请求最晚发送。而返回时间却是反过来的,也就是说先请求的数据会在页面上覆盖掉后请求的数据,这就导致检索内容与当前检索关键字不一致。

这是因为ajax发送的是异步请求,而每次请求的时长不一致,也就是不能保证请求返回顺序。

解决

主要分两种情况:第一种是保证多个不同请求的执行顺序;第二种是保证同个请求多次的执行顺序。

在网上看了一些文章,这里列举下几个方案

有的人说直接使用ajax的同步模式就好了,我觉得这样做就失去了ajax的意义了,而且用户体验也不好。

第一种情况的解决方法

在ajax的success函数下发起下一个ajax请求,或在complete函数发起一个ajax请求,实现顺序调用

第二种情况的解决方法

在前端定义一个全局变量,记录请求次数的标识符,并把这个标识符带上传给后端,在ajax的回调中也返回过来,判断全局变量的值是否等于该标识符,如果等于就肯定是最后一次发起的请求,然后再渲染页面。