jquery队列控制ajax执行顺序

分手后的思念是犯贱 2022-07-16 06:53 141阅读 0赞

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

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

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

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

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

![20161009233942742][]

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

<!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,不然的话，会直接执行内层函数的操作语句。

[20161009233942742]: /images/20220716/2fb16026183f426cb212d35fb07d9177.png