jquery队列控制ajax执行顺序

来源：互联网发布：雅思6 知乎编辑：程序博客网时间：2024/05/17 22:47

先说一下需求吧，一个页面最多有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!" onclick="clearQue();"/></div></body></html>

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

2 0