juery源码之queue(队列)

   queue是jQuery的队列方法，可以用于动画处理，已经多个回调的处理。

   queue模块向外开放的api分别是：

•  $上，即工具方法上的$.queue()、$.dequeue()、$._queueHooks()
•  jQuery实例方法，queue、dequeue、clearQueue、promise

  queue是入列，dequeue是出列。

$.queue():

用法

   $.queue($(".test")[0],"fun",function(){
        console.log(1);
    });
    $.queue($(".test")[0],"fun",function(){
        console.log(2);
    });

源码

queue: function( elem, type, data ) {
		var queue;

		if ( elem ) {    
			type = ( type || "fx" ) + "queue";  //如果type存在就用type入参连接字符串，否则默认的fx。
			queue = data_priv.get( elem, type ); //调用数据缓存data查找数据缓存

			// Speed up dequeue by getting out quickly if this is just a lookup
			if ( data ) {   //如果传入data入参 
				if ( !queue || jQuery.isArray( data ) ) {  //如果查找的数据缓存不存在或者data是数组；如果是数组，会把之前的queue覆盖掉
					queue = data_priv.access( elem, type, jQuery.makeArray(data) );  //直接设置data缓存
				} else {
					queue.push( data );  //如果存在了queue，则直接放入数组
				}
			}
			return queue || [];
		}
	},

$.dequeue

用法

将回调出列，每调用一次出列一个。因如果有N个回调，调用N次dequeue才能全部出列。第一个参数是DOM元素，第二个是队列的名字。出队的同时，queue队列的回调函数将会触发。

 $.dequeue($(".test")[0],"fun");  //1

源码

dequeue: function( elem, type ) {
		type = type || "fx"; 

		var queue = jQuery.queue( elem, type ), //查找数据缓存
			startLength = queue.length,
			fn = queue.shift(),  //队列的第一项出列
			hooks = jQuery._queueHooks( elem, type ), 
			next = function() {  //next函数，可用于下一个出列
				jQuery.dequeue( elem, type );   
			};

		// If the fx queue is dequeued, always remove the progress sentinel
		if ( fn === "inprogress" ) { //用于默认fx类型的出队
			fn = queue.shift();  
			startLength--;
		}

		if ( fn ) {

			// Add a progress sentinel to prevent the fx queue from being
			// automatically dequeued
			if ( type === "fx" ) {  //用于默认类型
				queue.unshift( "inprogress" );
			}

			// Clear up the last queue stop function
			delete hooks.stop;
			fn.call( elem, next, hooks );  //调用
		}

		if ( !startLength && hooks ) {  //如果length=0且hookes不为undefined，清空data缓存
			hooks.empty.fire();
		}
	},

next用法

next可以用于出列。

  $.queue($(".test")[0],"fun",function(next){
        console.log(1);
        next();
    });
    $.queue($(".test")[0],"fun",function(){
        console.log(2);
    });

    $.dequeue($(".test")[0],"fun");

_queueHooks

用于当fx队列的数据全部出队列后，清除data数据缓存

	_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() {   //callbacks对象，并且添加了回调函数用于清除数据缓存
				data_priv.remove( elem, [ type + "queue", key ] );
			})
		});
	}

$(selector).queue(type,data)

用法

    $(".test").queue("fun", function () {
        console.log(1);
    });
    $(".test").queue("fun",function(){
        console.log(2);
    });
    

或者：

    $(".test").queue(function () {
        console.log(1);
    });
    $(".test").queue(function(){
        console.log(2);
    });

这种方式添加到队列，队列的第一项会自动执行，在控制台打印1.

源码

queue: function( type, data ) {
		var setter = 2;

		if ( typeof type !== "string" ) {
			data = type;    //如果type缺省，默认为fx
			type = "fx";
			setter--;  //setter值减一
		}

		if ( arguments.length < setter ) {
			return jQuery.queue( this[0], type ); //如果入参个数小于setter，则为查找
		}

		return data === undefined ?
			this :
			this.each(function() {
				var queue = jQuery.queue( this, type, data ); //调用工具方法的入队

				// Ensure a hooks for this queue
				jQuery._queueHooks( this, type );   //可以用于删除data缓存

				if ( type === "fx" && queue[0] !== "inprogress" ) { //如果是默认类型 fx，并且队列的第一项不是inprogress
					jQuery.dequeue( this, type );   //则自动出队
				}
			});
	},

$(selector).dequeue(type)

用法：

    $(".test").queue("fun",function () {
        console.log(1);
    });
    $(".test").queue("fun",function(){
        console.log(2);
    });
    $(".test").dequeue("fun");
    $('.test').dequeue("fun");

源码

	dequeue: function( type ) {
		return this.each(function() {
			jQuery.dequeue( this, type );
		});
	},

clearQueue:

用法

   $(".test").clearQueue("fun");

源码

clearQueue: function( type ) {
		return this.queue( type || "fx", [] );
	},

promise

用法

等所有的队列出队完再执行done添加的函数

   $(".test").queue("fun",function () {
        console.log(1);
    });
    $(".test").queue("fun",function(){
        console.log(2);
    });
    $(".test").promise("fun").done(function(){
        console.log("Done!");
    })
    $(".test").dequeue("fun");
    $('.test').dequeue("fun");
    $('.test').dequeue("fun");

源码

	promise: function( type, obj ) {
		var tmp,
			count = 1,
			defer = jQuery.Deferred(),
			elements = this,
			i = this.length,
			resolve = function() {
				if ( !( --count ) ) {
					defer.resolveWith( elements, [ elements ] );  //延迟对象resoleWith函数触发
				}
			};

		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 );   //添加到callbacks回调中
			}
		}
		resolve();
		return defer.promise( obj );
	}