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");
}
}