队列的特性先进先出。大家肯定会想到我们采用数组不是也可以达到先进先出的效果。比如我入队采用push方法，出列采用shift方法。没错其实最简单的队列完全可以采用数组来描述。只不过jQuery提供的队列功能更多更强大。jQuery队列底层的存储方式就是使用数组来存储的。最终的数据是通过我们前篇文章见到的Data对象来存储的。
jQuery队列涉及到的一些方法
/**源码3608行**/
jQuery.extend({
queue, //入队
dequeue, //出队
_queueHooks //清除数据
});
/**源码3674行**/
jQuery.fn.extend({
queue,//入队
dequeue,//出队
delay,//延迟出队
clearQueue,//清除队列
promise//统一管理队列状态
});
首先我们来看工具方法（扩展在jQuery对象上的方法）中的queue。
首先进行了判断，如果没有传入队列的名字（type），则默认使用'fx'方法。然后通过队列名字去获取队列的存储数组，如果没有传入data数据，则直接返回队列的信息。如果传入data说明是赋值操作，如果没有找到这个队列或者传入了数组则直接创建新的数组，并赋值data数据。如果已经存在了该队列则直接进行push（入队）操作。
接下来是工具方法的dequeue方法。第一步也是对type进行转换，如果没有传入type则默认为'fx'。然后对获取到队列进行shift（出队）。
然后判断了出队的对象是不是字符串'inprogress'，如果是则再进行一次出队操作，然后又对type进行判断，如果是'fx'再用unshift添加'inprogress'，这样操作之后队列头部最终保存的还是字符串'inprogress'。然后对队列里面的函数进行了调用，并把next和hooks当参数传入。我们可以看到next函数最终调用的还是工具方法中的dequeue方法。所以我们可以这样写来达到自动出队效果。
function a(next, hooks){
console.log('a');
next();
}
function b(next){
console.log('b');
next();
}
function c(){
console.log('c');
}
$(document).queue('q1', a).queue('q1', b).queue('q1', c);
$(document).dequeue('q1');
//控制台最终会依次输出a,b,c。
dequeue方法最后的代码其实就是判断队列里面的数据是否都已经进行了出队操作，如果是则通过定义的工具方法_queueHooks进行清空数据操作。
然后我们来看定义在原型上的queue方法，和工具方法queue不同的地方是这里会通过调用_queueHooks方法对该元素绑定清除data数据的方法。还有一个需要注意的是如果不传入type或者传入的type为'fx'，则自动会调用一次dequeue方法进行出队操作。
然后我们来看delay方法，这方法的操作很简单，通过调用queue方法进行了入队操作。然后通过setTimeout来调用next方法（出队）。所以我们可以通过这样操作来达到延迟出队目的。
function a(next){
console.log('a');
next();
}
function b(next){
console.log('b');
next();
}
function c(){
console.log('c');
}
$(document).queue('q1', a).delay(2000, 'q1').queue('q1', b).delay(2000, 'q1').queue('q1', c);
$(document).dequeue('q1');
//我们在控制台上可以看到abc之前输出会间隔2秒钟
最后我们来一起看一下promise方法。promise方法的作用就是当指定的所有元素的队列都出队完毕之后调用设置的回调函数。
function a(next){
console.log('a');
}
function b(next){
console.log('b');
}
$(document).queue('q1', a).promise('q1').done(function(){
console.log('出队完毕');
});
$(document).dequeue('q1');
$(document).dequeue('q1');
//调用两次出队操作之后控制台输出'出队完毕'
源码的原理很简单就是往前面我们说到的清空数据的promise中添加一个回调函数，用count计数，每个元素出队完毕之后进行-1操作，如果全部出队完毕之后通过新创建的Deferred对象进行回调操作。
网友评论