jquery队列控制ajax执行顺序

最新推荐文章于 2021-08-06 19:25:09 发布

Zerlinda_Li

最新推荐文章于 2021-08-06 19:25:09 发布

阅读量5.3k

点赞数 2

分类专栏： js 文章标签： jquery queue 闭包

本文链接：https://blog.csdn.net/licheng989/article/details/52772205

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先说一下需求吧，一个页面最多有20张图片，我们使用ajax异步请求图片来提升图片访问速度。但是有两个问题：1）ajax异步请求有并发限制，我使用的ie8限制数为6；2）当我执行其他操作时，必须等待所有ajax请求均返回结果，才能执行其他操作。

经讨论，我们使用jquery队列将ajax请求放入到队列里面，当前一个请求有结果返回时，才执行下一个请求。当我们执行其他操作时，则清空队列。如此，就不会影响其他的操作了。

具体步骤为：1）构建一个函数数组；2）将函数数组方法队列，初始化队列；3）出队列，来执行函数数组里面的函数；4）其他操作时，清空队列和函数数组。

我们将ajax请求放到函数数组里面，当ajax返回成功时，执行出队列，这样就实现了当前一个请求有结果返回时，才执行下一个请求。

这里写了一个简化的demo，看看效果图

如上图可以看到队列被清空又重新赋值了，以下是代码

<!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>

queue的使用的话，可以看文档。要注意的是FUNC.push()时里面要使用闭包，不然参数就会被覆盖。function里面要return一个function,不然的话，会直接执行内层函数的操作语句。