同时发送了多次ajax请求,且都是异步的,怎样拿取某一次ajax请求的返回数据。

时间:2021-04-10 04:30:21

一:需求

要实如下输入框可支持模糊查询,查询字符串:“nick”。

同时发送了多次ajax请求,且都是异步的,怎样拿取某一次ajax请求的返回数据。


二:实现原理

给输入框绑定keyup事件,然后ajax请求,带输入的参数去后台数据库拿出数据再返回到页面。


三:分析

1),ajax 请求设置成同步。

performance会不好,因为是同步,所以当你输入"n"  时就会发出一次ajax请求,而且这个时候输入框不能再输入字符,必须等第一次请求结束后才能继续输入"i"。当然这个时候返回来的数据肯定是正确的。

同时发送了多次ajax请求,且都是异步的,怎样拿取某一次ajax请求的返回数据。


1),ajax 请求设置成异步。就不必担心一次只能输入一个字符了,可以一次性输完。这个时候也是发出了四次ajax 请求。”n“,"ni","nic","nick"分别发了一次ajax请求。现在问题来了:如果代码是下面这样的话,就会有问题。

$("[name='searchkey']").keyup(function(){
			var inputName = this.value;
			var existSelectUser = "false";
			if($("#selectSCNames").find("option").length>0){
				existSelectUser = "true";
			}
			$.ajax({
				url:"<%=home%>/UserDailyActionReportAction.do?operation=getMatchUser",
				data:{
					"inputName":inputName,
					"existSelectUser":existSelectUser
				},
				async:true,
				dataType:"JSON",
				type:"POST",
				success:function(result){
					$("#showDiv").html(result.matchedUsers);
				}
			});
		});



发现输入”nick“后查询到的结果不正确。

同时发送了多次ajax请求,且都是异步的,怎样拿取某一次ajax请求的返回数据。



原因是什么呢:看下面的图片,

同时发送了多次ajax请求,且都是异步的,怎样拿取某一次ajax请求的返回数据。

其实由代码可以看出,其实拿的是最后一次请求的返回数据。但是由于四次请求的时间各不相同,虽然”n“和”ni“首先被触发,但是他们用的时间都比”nic“和”nick“多,所以最后拿的数据是请求时间最多的那次ajax请求返回来的数据,也就是”ni“这个请求的数据。而我们输入的字符串是”nick“。所以会出现数据不匹配的问题。



如何解决呢??

使用如下代码的话就可以正常work了。

var datas = new Array();
var i = 0;
$("[name='searchkey']").keyup(function(){
			i++;
			var inputName = this.value;
			var existSelectUser = "false";
			if($("#selectSCNames").find("option").length>0){
				existSelectUser = "true";
			}
			$.ajax({
				url:"<%=home%>/UserDailyActionReportAction.do?operation=getMatchUser",
				data:{
					"inputName":inputName,
					"existSelectUser":existSelectUser,
					"index":i
				},
				async:true,
				dataType:"JSON",
				type:"POST",
				success:function(result){
					var index = result.index;
					var ind = index-1;
					datas[ind] = result.matchedUsers;
					$("#showDiv").html(datas[i-1]);
				}
			});
		});


分析:

同时发送了多次ajax请求,且都是异步的,怎样拿取某一次ajax请求的返回数据。

1:此处创建了一个数组和一个index。

2:每触发一次keyup,index加1。

3:每次请求时,带着index,作为一个参数。

4,:返回传进去的index。

5,将返回数据塞进数组的第index个位置。

6,取数组最后一个位置的数据。

为什么取的数据会是正确的呢?

因为虽然”nick“是第四次触发keyup时间的,所以”i“ 是4,所以他请求时传进去的index是4,返回来的index也是4。虽然它是请求时间是最短的,但是他返回来的数据会被放到数组的第四个位置上。其实不管”nick“ 的请求时间是排第几位,因为他是第四次触发keyup事件的,所以他请求时传进去的index是4,所以他这个请求返回来的数据都会被塞到数组的第四个位置上。所以就不会出现查询出的数据不正确的问题了。