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

背景

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

问题

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

分析

通过浏览器工具查看发送的请求

我们可以看到第3条请求最先发送，第1条请求最晚发送。而返回时间却是反过来的，也就是说先请求的数据会在页面上覆盖掉后请求的数据，这就导致检索内容与当前检索关键字不一致。

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

解决

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

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

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

第一种情况的解决方法

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

第二种情况的解决方法

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