queue
队列方法：执行顺序的管理。
(1)jQuery用extend扩展，是有工具方法。
jQuery.extend({
queue // 添加 类似数组的push
dequeue // 删除 类似于 shift
_queueHooks // 给传入的数据进行处理，加个 argu＋queue。
});
注意：在 queue 和 dequeue 中存入的必须是一个函数，其他格式不可以。
例子：(1)
工具方法使用。
function aaa() {
alert('aaa');
}
function bbb() {
alert('bbb');
}
$.queue(document, 'q1', aaa); // 这里创建了一个q1的队列。存入了一个值，是个函数aaa
$.queue(document, 'q1', bbb); // 这里在去q1队列中加入了第二个值，是函数bbb
// $.queue(document, 'q1', [aaa, bbb]); //也可以直接存入一个数组。
console.log( $.queue(document, 'q1') ); // FF 打印出 [aaa(), bbb()]。
// 注意：queue 和 dequeue 中存入的必须是一个函数。
$.dequeue(document, 'q1'); // 弹出 aaa函数 ，出队，只是把第一个函数取出来。并执行 aaa();
$.dequeue(document, 'q1'); // 弹出 bbb函数 ，出队，又把第一项给读取出来。并执行 bbb();
//注意： dequeue，取出第一个变量，并执行它，其他的类型，无法执行。
例子：(2)
实例方法使用。
$(document).queue('p1', aaa);
$(document).queue('p1', bbb);
console.log( $.queue(document, 'p1') ); // FF 打印出 [aaa(), bbb()]。
$(document).dequeue('p1', bbb); // 打印 aaa函数。
(2)jQuery.fn.extend 扩展的是实例方法。
jQuery.fn.extend({
queue
dequeue
delay // 延迟队列
clearQueue
promise
});
思考：队列的作用。
$('#test').click(function () {
$(this).animate({ 400}, 2000); // (1)
$(this).animate({height: 400}, 2000); // (2)
$(this).animate({left: 200}, 2000); // (3)这里position要absolute
// 和上面一样。
// $(this).animate({ 400}, 2000).animate({height: 400}, 2000).animate({left: 200}, 2000);
});
// 这里的执行顺序是一次执行，不是并发执行。(1)-->(2)-->(3)
// 用定时器开启，然后执行。但是定时器是异步操作。setInterval是异步操作。
// 这个就是用队列实现的。
当使用动作函数的时候，用 queue 依次将其中对函数压入队列fx。运行的时候，就 dequeue 操作。
deferred 的是控制一个操作，queue 是控制一系列的操作。
但是 deferred 针对异步操作，延迟对象更强大一些。主要针对的是一个异步操作的控制。
queue是针对多个的。deferred很难完成多异步的操作。
在 jQuery 中 queue 主要针对的是运动的操作，去解决连续运动的这个操作。
例子
A-------------------- 使用规则
$(this).animate({ 400}, 2000).queue('fx', function () {
$(this).dequeue(); // 如果没有这个出队操作，后面的，就无法继续执行了。
}).animate({height: 400}, 2000).animate({left: 200}, 2000);
B--------------------- fx可以省略，并且如果调用函数，需要使用$(this).dequeue();
// 这里的 fx 是可以省略的，默认就是。
$(this).animate({ 400}, 2000).queue(function () {
$(this).dequeue(); // 如果没有这个出队操作，后面的，就无法继续执行了。
}).animate({height: 400}, 2000).animate({left: 200}, 2000);
C--------------------- 传入的参数，等价于dequeue。
$(this).animate({ 400}, 2000).queue(function (next) {
$(this).css('left', 200);
next();
}).animate({height: 400}, 2000).animate({left: 200}, 2000);
D－－－－－－－－－－－－－ 利用回调函数的形式
$(this).animate({ 400}, 2000, function () {
$(this).css('left', 200);
}).animate({height: 400}, 2000).animate({left: 200}, 2000);
E-------------------- 可以通过控制queue，来控制，保证异步的顺序。
$(this).animate({ 400}, 2000).queue(function (next) {
var _this = this;
var timer = setInterval(function () {
_this.style.height = ( _this.offsetHeight + 1 ) + "px";
if (_this.offsetHeight >= 400) {
next(); // 可以控制出队的时间，没有next的执行，就不会执行下一个动作。
clearInterval(timer);
}
}, 30);
}).animate({left: 200}, 2000);
F-------------------- delay(2000) 延迟2秒钟
$('#test').click(function () {
$(this).animate({ 400}, 2000).delay(2000).animate({left: 200}, 2000);
});
G--------------------- promise 所有运动执行完成以后，执行 promise 挂载的函数。
$('#test').click(function () {
$(this).animate({ 400}, 2000).delay(2000).animate({left: 200}, 2000);
$(this).promise().done(function () {
alert('done');
});
});
});
源码：
jQuery.extend({
queue: function( elem, type, data ) {
var queue;
// 当元素存在的时候
if ( elem ) {
// 可以直接写一个type类型，不写默认就是fx
type = ( type || "fx" ) + "queue";
queue = data_priv.get( elem, type ); // 如何往队列中存储，得到数组
// Speed up dequeue by getting out quickly if this is just a lookup
// 如果存在第三个参数，就是传入的执行函数。
if ( data ) {
// 判断 queue 是否存在，如果不存在，就执行，创建一个。
// 或者存入的 data 是数组，就重写，并覆盖以前的所有方法。搞一个新的 队列 queue 。
if ( !queue || jQuery.isArray( data ) ) {
// 设定数据。
queue = data_priv.access( elem, type, jQuery.makeArray(data) );
}
// 存在，就压入。
else {
queue.push( data );
}
}
// 没有酒返回空数组,写2个参数，就返回集合。
return queue || [];
}
},
// 出队
dequeue: function( elem, type ) {
// 不写就默认fx
type = type || "fx";
// 先去得到 queue 的队列。
var queue = jQuery.queue( elem, type ), // queue 初始化。
startLength = queue.length, // 获取数组长度。
// 返回第一项。
fn = queue.shift(),
hooks = jQuery._queueHooks( elem, type ),
// 出队的操作 next(), 跟 dequeue 一回事。
next = function() {
jQuery.dequeue( elem, type );
};
// If the fx queue is dequeued, always remove the progress sentinel
// 当定时器结束的时候， 进行出队。
if ( fn === "inprogress" ) {
fn = queue.shift();
startLength--; ／／ 长度 － 1
}
// 是否是函数。
if ( fn ) {
// Add a progress sentinel to prevent the fx queue from being
// automatically dequeued
// 是默认情况下，就填入。
if ( type === "fx" ) {
// inprogress 针对fx。添加 inprogress
// 只有三处用了 inprogress。
// inprogress 的作用就是让队列，可以自动的进行出队的操作。
queue.unshift( "inprogress" ); // 只有第一次，添加
}
// clear up the last queue stop function
delete hooks.stop;
// fn 是队列 刚退出来的函数， 传入参数， 进行call执行。
fn.call( elem, next, hooks );
}
if ( !startLength && hooks ) {
hooks.empty.fire();
}
},
// not intended for public consumption - generates a queueHooks object, or returns the current one
// 私有的函数，清理一下缓存。
// _queueHooks 的目的就是，将fx（默认），或者用户传入的的队列名，---->> 这些都是缓存到data中了，
// 当全部结束的时候，将那些 fixqueue， 等，对咧名称，全部干掉。
_queueHooks: function( elem, type ) {
var key = type + "queueHooks";
// data_priv.get( elem, key ) 取缓存，没有酒添加一个。
//
return data_priv.get( elem, key ) || data_priv.access( elem, key, {
empty: jQuery.Callbacks("once memory").add(function() {
data_priv.remove( elem, [ type + "queue", key ] );
})
});
}
});
实例的源码
jQuery.fn.extend({
queue: function( type, data ) {
var setter = 2;
判断是否是字符串。如果不是字符串，那么可能传入的是函数，或者数组。
if ( typeof type !== "string" ) {
data = type;
type = "fx";
setter--;
}
// 查看的状态
// 传入的参数小于2.
if ( arguments.length < setter ) {
return jQuery.queue( this[0], type ); // 返回一组元素的第一项。
}
// 若果是空的话，就返回this对象，如果不是空，就要遍历了。
return data === undefined ?
this :
this.each(function() {
var queue = jQuery.queue( this, type, data );
// ensure a hooks for this queue
//这里：_queueHooks了以后，看这个是不是空的，如果不是，就填入一个数据。
jQuery._queueHooks( this, type );
// 队列第0项，不是 inprogress 就出队，只是针对第一次出队操作，后续就不会了。
// 针对animate运动的。$(document).queue('p1', aaa).$(document).queue('p1', bbb);
// 如果连续多个操作，第一个就直接执行了，然后第二个进入队列。
// inprogress干的就是这个。保证执行第一个，后面的进行入队操作，等待前面的结束，激活后面的。
// 这里，$(document).queue('p1', aaa) 执行完，就要出队，然后再执行后面的动作。
// 这是一个入队方法，但是为什么调用出队呢？
// 针对的就是这个 $(document).queue('p1', aaa) 第一个要直接运动起来。后面的压入队列，等待第一个执行结束，在进行后面的.
// 逻辑比较简单
if ( type === "fx" && queue[0] !== "inprogress" ) {
// 出队
jQuery.dequeue( this, type ); //递归了。又重新调用。
}
});
},
dequeue: function( type ) {
return this.each(function() {
jQuery.dequeue( this, type );
});
},
// Based off of the plugin by Clint Helfers, with permission.
//
// 延迟时间的。time ＝＝ 600
delay: function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
type = type || "fx";
return this.queue( type, function( next, hooks ) {
// 这里搞了一个定时器，让你 time 时间以后，再进行出队操作。
var timeout = setTimeout( next, time );
hooks.stop = function() {
clearTimeout( timeout );
};
});
},
// 清空
clearQueue: function( type ) {
return this.queue( type || "fx", [] );
},
// 这里和 Deferred 和 callbacks 里面的东西差不多。
// 就是等到运动结束了，执行个函数什么的， 让promise去执行就好了。
// Get a promise resolved when queues of a certain type
// are emptied (fx is the type by default)
promise: function( type, obj ) {
var tmp,
// 计数
count = 1,
// Deferred 的对象
defer = jQuery.Deferred(),
elements = this,
i = this.length,
// 累加多少，就减多少。
resolve = function() {
// 直到 count ＝＝ 0 的时候，才会执行这个 resolveWith－－》》就是完成了－－－》》然后就是done。
// 这里就不存在fail了。
if ( !( --count ) ) {
defer.resolveWith( elements, [ elements ] );
}
};
if ( typeof type !== "string" ) {
obj = type;
type = undefined;
}
type = type || "fx";
while( i-- ) {
tmp = data_priv.get( elements[ i ], type + "queueHooks" );
if ( tmp && tmp.empty ) { //这个队列存在的时候，就进行累加。
count++;
tmp.empty.add( resolve ); // 添加事件
}
}
resolve(); // 内部函数调用，
return defer.promise( obj );
}
});