jQuery实现Ajax请求时，页面显示等待的效果，超过指定请求时间后，进行其他操作

　　背景：有一个按钮，点击之后向后端程序发起Ajax请求，在请求结果没有返回之前，页面显示等待的效果，此时仍旧是异步请求，等待的效果在接收到结果后撤销。

　　需求：因为网络延迟或者后端程序的问题，在发起Ajax请求后，可能等待10s都接收不到数据，现在需要做的就是，如果等待时间超过10s，那么就提示用户进行其他操作，不用再继续等待结果，终止Ajax获取到数据后的操作，即认为Ajax永远取不到数据了。

　　解决方案：可以使用Jquery的ajax方法，方法中有timeout和error这两项，timeout的值是一个Number，表示多少毫秒超时；对应的error的值是一个function，是在执行ajax失败后的操作，因为指定timeout之后，一旦超时，则认为出现error，所以会执行error绑定的function。

　　示例如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="jquery.min.js"></script>
</head>
<body>
	<p ></p>
</body>
<script>
	$.ajax({
		url:"test.php",
		timeout:2000,
		success:function(data){$("#p1").html(data)},
		error:function(){$("#p1").html("wrong")}
	});
</script>
</html>

　　测试的时候，可以再test.php执行sleep函数，让ajax在指定时间内取出到结果。

　　需要注意的是：ajax请求已经发出了，即使timeout，你也是不能中断请求的，只不过现在你可以不再关心请求的返回结果，因为在timeout之后，即使获得结果，也不会执行ajax中为success绑定的事件。

jQuery实现Ajax请求时，页面显示等待的效果，超过指定请求时间后，进行其他操作

相关推荐