jQuery 源码分析笔记(7) Queue

每个Element可以拥有多个队列，但是基本上都只使用到一个，即默认的fn队列。队列允许一系列函数被异步地调用而不会阻塞程序。例如：$("#foo").slideUp().fadeIn();其实这个就是我们大家常用的链式调用，实际上这是一个Queue。所以队列和Deferred地位类似，是一个内部使用的基础设施。当slideUp运行时，fadeIn被放到fx队列中，当slideUp完成后，从队列中被取出运行。queue函数允许直接操作这个链式调用的行为。同时，queue可以指定队列名称获得其他能力，而不局限于fx队列。

// 一般用法： 
$("#foo").slideUp(function() { 
alert("Animation complete."); 
}); 
// 相当于： 
$("#foo").slideUp(); // 不提供回调，只是触发事件 
$("#foo").queue(function() { // 把回调函数加入 
alert("Animation complete."); 
$(this).dequeue(); // 必须从队列中取出，那么队列中的下一个函数就有机会被调用 
});

queue内部使用data或者JavaScript数组API来保存数据。其中操作数组的push和shift天生就是一组队列API。而data可以用来保存任意数据。

queue: function(elem, type, data) { 
if(elem) { 
// 默认是fn 
type = (type || "fx") + "queue"; 
// data内部API：data(element, key, value, pvt); 
// 这里不传入data，是为了效率的考虑。如果没传入data，则只是get队列，那么就不需要以下的判断了 
var q = jQuery.data(elem, type, undefined, true); 
if(data) { 
if(!q || jQuery.isArray(data)) { 
q = jQuery.data(elem, type, jQuery.makeArray(data), true); 
} else { 
q.push(data); // 压入 
} 
} 
return q || []; 
} 
} 
dequeue: function(elem, type) { type = type || "fx"; // 得到这个队列 var queue = jQuery.queue(elem, type), // 出列一个元素 fn = queue.shift(), defer; 
// "inprogress"岗哨 
if(fn === "inprogress") { 
fn = queue.shift(); 
} 
if(fn) { 
// 加一个岗哨，防止自动出列 
if(type === "fx") { 
queue.unshift("inprogress"); 
} 
// 执行 
fn.call(elem, function() { 
jQuery.dequeue(elem, type); 
}); 
} 
if(!queue.length) { 
jQuery.removeData(elem, type + "queue", true); 
handleQueueMarkDefer(elem, type, "queue"); 
} 
}