队列模块的代码结构
静态方法jQuery下有queue,dequeue,_queueHooks这三种方法；静态方法不建议直接在外部调用；
实例方法.queue,.dequeue,.clearQueue,.delay,.promise
分别调用方法
$.dequeue(document,"q1") //静态方法 $(document).dequeue("q1"); //实例调用方法
jQuery.extend({ queue: function( elem, type, data ) { var queue; if ( elem ) { //当有元素时，才进行操作。比如：$.queue(document,"q1",aaa);document就是elem type = ( type || "fx" ) + "queue"; //如果没有传入q1那么type默认为fx，加上queue字符串 queue = data_priv.get( elem, type ); //去数据缓存中获取此元素的q1queue属性值，第一次时，是undefined。 if ( data ) { //data就是aaa if ( !queue || jQuery.isArray( data ) ) { //如果取的值不存在，第一次时是不存在的。进入if语句 queue = data_priv.access( elem, type, jQuery.makeArray(data) );//把data也就是aaa函数转换成数组形式，也就是变成[aaa()] } else { //当第二次执行时，也就是$.queue(document,"q1",bbb); 因为里面已经有[aaa()]了，因此直接把data（这里是bbb函数）push到q1queue属性值中。当然这里有一个例外，比如：第二次执行时，是这样的$.queue(document,"q1",[bbb]);传入的data是个数组，这时不会走这里，而是走if语句，这样的话，会把之前的[aaa()]覆盖掉，只会有[bbb()]。 queue.push( data ); } } return queue || []; //返回这个队列，其实就是这个数组[aaa(),bbb()] } }, dequeue: function( elem, type ) { //$.dequeue(document,"q1") type = type || "fx"; var queue = jQuery.queue( elem, type ), //先获取这个q1队列的值 startLength = queue.length, fn = queue.shift(), //取队列中的第一项 hooks = jQuery._queueHooks( elem, type ),
//hooks其实是元素elem在数据缓存中的一个属性对象，如果我们调用的是$.dequeue(document,"q1") 的话，
//那么属性对象名就是q1queueHooks，属性值是{empty: jQuery.Callbacks("once memory").add(function() { data_priv.remove( elem, [ type + "queue", key ] );})}。
//因此你使用hooks.empty，其实就是q1queueHooks.empty。 next = function() { //这个next方法其实就是出队 jQuery.dequeue( elem, type ); }; if ( fn === "inprogress" ) {
//这里为什么会出现inprogress呢？举个例子：$(this).animate({300},2000,function(){}).animate({left:300},2000);
//这个代码的意思是入队两个定时器函数，第一个定时器函数是把宽度从100变成300，第二个定时器函数是把left从0变成300.如果这里只有入队操作，没有出队操作，那么这两个定时器函数都不会执行，
//因此大家可以去看queue的实例方法，源码在下面，里面有这样一个判断：if ( type === "fx" && queue[0] !== "inprogress" ) {jQuery.dequeue( this, type );}，
//animate的入队，默认队列为fx，而且它的队列的第一项不是inprogress，而是第一个定时器函数，这时进入if语句，进行出队。因此才能执行第一个定时器函数。
//那么第二个定时器函数来入队时，也会马上出队吗？不会，不然的话，两个定时器函数会同时执行了。那么第二个定时器函数为什么没有立马出队，
//是因为第一个定时器函数出队时，会在fx队列前面添加inprogress，因此第二个定时器函数入队时，fx队列的第一个项就是inprogress，因而不会进行出队操作。
// 第一个定时器函数执行完之后，就会进行再次出队，这时第二个定时器函数就会执行了。 fn = queue.shift(); //如果取出的队列的第一项是inprogress，这时队列是[bbb()]，因为inprogress已经出队了，就再次出队，这时bbb()出队，队列为[]，fn为bbb。 startLength--; //startLength变成1 } if ( fn ) { //当数组为["inprogress"]出队时，fn = undefined,startLength=0;这时就会结束队列操作了。 if ( type === "fx" ) { //当是默认队列时，也就是animate操作时，就会先往队列的前面添加inprogress queue.unshift( "inprogress" ); //队列变成 ["inprogress"]，这时就会执行bbb()，执行完之后，又出队。 } delete hooks.stop; fn.call( elem, next, hooks ); //这里就会执行第一个定时器函数，执行完之后，就会调用next方法，进行出队。这时的队列是["inprogress",bbb()] } if ( !startLength && hooks ) { //当队列结束后，清理数据缓存中队列数据 hooks.empty.fire(); //这里执行fire方法，就会触发add添加的方法，也就是data_priv.remove( elem, [ type + "queue", key ] );把缓存数据中的所有队列信息，以及q1queueHooks一起删除掉。 } }, _queueHooks: function( elem, type ) { var key = type + "queueHooks"; return data_priv.get( elem, key ) || data_priv.access( elem, key, { empty: jQuery.Callbacks("once memory").add(function() { //empty的属性值是一个Callbacks对象，Callbacks的特点是可以通过它的add方法添加函数，当调用Callbacks的fire方法时，就会执行add添加的方法。 data_priv.remove( elem, [ type + "queue", key ] ); }) }); } });
jQuery.fn.extend({ queue: function( type, data ) { // $(document).queue("q1",aaa); var setter = 2; if ( typeof type !== "string" ) { //当type不等于字符串时，也就是这种情况时：$(document).queue(aaa); data = type; //data = aaa，type = "fx",setter =1 type = "fx"; setter--; } if ( arguments.length < setter ) { //这里判断是获取，还是设置。比如:$(document).queue("q1")，这里是获取操作，因此进入if语句。 return jQuery.queue( this[0], type ); //获取是针对一组元素的第一个元素。 } return data === undefined ? this : this.each(function() { //这里就是设置操作，对每个元素都进行设置 var queue = jQuery.queue( this, type, data ); //入队操作，会在缓存系统中添加一个队列q1，队列中，入队aaa。 jQuery._queueHooks( this, type ); //设置元素的hooks对象，会在缓存系统中添加一个hooks属性，它可以移除缓存系统中与元素this，相关的队列操作的所有数据。 if ( type === "fx" && queue[0] !== "inprogress" ) { //跟静态方法的queue的思路一样。如果是动画队列，那么首次入队的时候会自动出队执行。 jQuery.dequeue( this, type ); } }); }, dequeue: function( type ) { //$(document).dequeue("q1"); 出队操作，是针对一组元素的。也就是说如果有多个document被匹配上，那么会对每个document都做出队操作。 return this.each(function() { jQuery.dequeue( this, type ); }); }, delay: function( time, type ) { //第一个参数是延迟的时间，第二个参数是哪个队列（队列的名字）延迟，我们先来举个例子说下delay方法的作用：$(this).animate({300},2000).delay(2000).animate({left:300},2000);这个代码的意思是：第一个定时器函数执行结束后，会延迟两秒钟，才会执行第二个定时器函数。 time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
//jQuery.fx.speeds = {slow: 600,fast: 200,_default: 400};意思就是说，你delay里面是否写了"slow"，"fast"，或"_default"。
//如果是，就直接调用默认的值，如果传入的是数字，那么就只用数字。 type = type || "fx"; return this.queue( type, function( next, hooks ) { var timeout = setTimeout( next, time ); //延迟time秒，再进行出队。意思就是time秒后，第二个定时器函数才会执行。 hooks.stop = function() { //这个方法会清除定时器，如果执行，next方法就不会执行，也就不会出队了 clearTimeout( timeout ); }; }); }, clearQueue: function( type ) { return this.queue( type || "fx", [] ); //把队列变成空数组，上面说到，如果传入数组，会覆盖队列的原数组 }, promise: function( type, obj ) { //type是指队列的名字，如果此type的队列全部出队后，就会执行done添加的方法。
//我们先举个例子说下这个方法的作用：$(this).animate({300},2000).animate({left:300},2000);$(this).promise().done(function(){alert(3)});
//这句代码的意思是，等上面两个定时器函数都执行结束后（因为他们默认处理的都是fx队列）。才会执行弹出3的函数。 var tmp, count = 1, defer = jQuery.Deferred(), //新建一个延迟对象 elements = this, i = this.length, //元素的个数，这里假设是一个document元素 resolve = function() { if ( !( --count ) ) { defer.resolveWith( elements, [ elements ] ); } }; if ( typeof type !== "string" ) { //如果没传入队列名，就用fx默认队列 obj = type; type = undefined; } type = type || "fx"; while( i-- ) { //执行一次 tmp = data_priv.get( elements[ i ], type + "queueHooks" ); //去缓存系统找跟这个元素有关的数据 if ( tmp && tmp.empty ) { //如果存在，就证明队列中有定时器函数要执行。进入if语句 count++; //count等于2 tmp.empty.add( resolve ); //当调用tmp.empty.fire方法时，就会执行resolve 方法。而这里会等fx类型的队列全部出队后（这两个定时器函数都执行结束后），才会触发fire方法，
//这时就会执行add添加的所有方法，resolve就是其中一个，于是count就会变成0（在出队列时，下面的resolve方法已经执行一次了），进入if语句，执行延迟对象的resolveWith，
//而此方法，就会触发延迟对象的done方法添加的函数，因此弹出3的函数执行。 } } resolve(); //这里会先执行一次resolve方法，count--，变成1。 return defer.promise( obj ); //返回这个延迟对象。 } });
引自：http://www.cnblogs.com/chaojidan/p/4183687.html