jQuery中的队列操作

1.工具方法$.queue():

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

		if ( elem ) {
			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 ) {
				if ( !queue || jQuery.isArray( data ) ) {
					queue = data_priv.access( elem, type, jQuery.makeArray(data) );
				} else {
					queue.push( data );
				}
			}
			return queue || [];
		}
	}

队列中存储的都是函数，所以第三个参数必须是函数或者存放函数的数组，如果是第三个参数是function，则进行push操作，如果是数组形式，则进行赋值操作，覆盖掉原来的数组，重新赋值一个数组，数组中的元素都是function。

var div = document.getElementById('div1');
	function aaa(){
		console.log(1);
	}
	function bbb(){
		console.log(2);
	}
	function ccc(){
		console.log(3);
	}
	function ddd(){
		console.log(4);
	}
	function eee(){
		console.log(5);
	}
	$.queue(div,'q1',aaa);
	$.queue(div,'q1',bbb);
	console.log($.queue(div,'q1'));
	$.queue(div,'q1',[ccc,ddd,eee]);
	console.log($.queue(div,'q1'));

$('#div1').click(function(){
	  $(this).animate({width:300},2000);
	  $(this).animate({height:300},2000);
	  $(this).animate({left:500},2000);
	});

上述动作是 依次完成，宽先变成300，然后高再变成300，left的值变成300，共经历6s，这是利用了队列的原因。

$.dequeue():

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() {
				jQuery.dequeue( elem, type );
			};

		// If the fx queue is dequeued, always remove the progress sentinel
		if ( fn === "inprogress" ) {//针对animate()运动，前面取出的是'inprogerss',在取一次
			fn = queue.shift();
			startLength--;
		}

		if ( fn ) {

			// Add a progress sentinel to prevent the fx queue from being
			// automatically dequeued
			if ( type === "fx" ) {//如果是animate，封锁
				queue.unshift( "inprogress" );
			}

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

		if ( !startLength && hooks ) {//当缓存中的存放函数的数组为空时，将数组名字清除
			hooks.empty.fire();
		}
	},

清除空的数组的名字：

_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() {
				data_priv.remove( elem, [ type + "queue", key ] );
			})
		});
	}

fx是内部使用针对animate()运动函数的，当没有写队列名时，默认是fx，此时第一个添加的队列函数会默认执行

下列代码会弹出自动执行aaa()函数，因为没有写队列名，默认对列名时fx

               function aaa(){
			alert(1)
		};
		function bbb(){
			alert(2)
		};
		$(document).queue(aaa);
		$(document).queue(bbb);

.delay()延迟执行队列

$('#div1').click(function(){
		$(this).animate({width : 300},2000).delay(2000).animate({left : 300},2000); 
	});

参数可以是数字，表示毫秒，也可以是‘slow’，'fast'，‘normal’

delay: function( time, type ) {
		time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
		type = type || "fx";

		return this.queue( type, function( next, hooks ) {
			var timeout = setTimeout( next, time );
			hooks.stop = function() {
				clearTimeout( timeout );
			};
		});
	},

.promise():当运动队列执行完后，在执行done()添加的函数

原理：在empty回调对象中添加函数

resolve = function() {
				if ( !( --count ) ) {
					defer.resolveWith( elements, [ elements ] );
				}
			};

当队列执行完毕后，会执行hooks.empty.fire();就会执行resovle函数，当count===0时，执行defer.resolveWith()，进而执行done()

promise: function( type, obj ) {
		var tmp,
			count = 1,
			defer = jQuery.Deferred(),
			elements = this,
			i = this.length,
			resolve = function() {
				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 );
	}

实例：当所有运动执行完毕后，弹出123

$('#div1').click(function(){ 
	
		$(this).animate({width : 300},2000).animate({left : 300},2000); 
		$(this).promise().done(function(){
			alert(123);
		});
		
	});