jquery队列控制ajax执行的顺序

首先讨论要求. 一个页面最多可以包含20张图片. 我们使用ajax异步请求图片以提高图片访问速度. 但是有两个问题: 1）Ajax异步请求有并发限制，而我使用的ie8的限制是6； 2）执行其他操作时，必须等待所有ajax请求返回结果，然后再执行其他操作.

讨论之后，我们使用jquery队列将ajax请求放入队列，并仅在返回当前请求的结果时执行下一个请求. 当我们执行其他操作时，队列将被清除. 这样，就不会影响其他操作.

具体步骤是: 1）构造一个函数数组； 2）将函数数组方法排队并初始化队列； 3）退出队列以执行功能数组中的功能； 4）在其他操作期间清除队列和函数数组.

我们将ajax请求放入函数数组中，当ajax成功返回时，它将在队列外执行，以便仅当返回当前请求的结果时才执行下一个请求.

我在这里写了一个简化的演示jquery ajax执行顺序，看看效果图

如上图所示，您可以看到队列已清空并重新分配，以下是代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
var gCache = [1,2,3,4];
var FUNC = [];
var aniCB = function(){
	$(document).dequeue('myqueue');
}
$(function() {
    initQue();
});
function initQue(){
	 for (var i = 0; i < gCache.length; i++) {
	        FUNC.push((function(index) {
	            return function() {                 
	                console.log(index);
	                setTimeout(aniCB, 2000);
	            }
	        })(i));
	    }
	    $(document).queue('myqueue', FUNC);
	    aniCB();
}
function clearQue(){
	$(document).queue('myqueue', []);
	FUNC = [];
	initQue();
}
</script>
</head>
<body>
<div class="pic">
<input type="button" value="reset queue!" οnclick="clearQue();"/>
</div>
</body>
</html>

有关队列的使用，您可以阅读文档. 应该注意的是jquery ajax执行顺序，闭包用于FUNC.push（）中，否则参数将被覆盖. 必须在函数中返回一个函数，否则，将直接执行内部函数的操作语句.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-288552-1.html