快捷導(dǎo)航

jQuery 源碼分析筆記(7) Queue

更新時間：2011年06月19日 23:57:13 作者：

queue是用來維護(hù)函數(shù)隊(duì)列的。比較常用的是queue(queueName, callback);其中queueName缺省是fn，即標(biāo)準(zhǔn)函數(shù)隊(duì)列。

每個Element可以擁有多個隊(duì)列，但是基本上都只使用到一個，即默認(rèn)的fn隊(duì)列。隊(duì)列允許一系列函數(shù)被異步地調(diào)用而不會阻塞程序。例如：$("#foo").slideUp().fadeIn();其實(shí)這個就是我們大家常用的鏈?zhǔn)秸{(diào)用，實(shí)際上這是一個Queue。所以隊(duì)列和Deferred地位類似，是一個內(nèi)部使用的基礎(chǔ)設(shè)施。當(dāng)slideUp運(yùn)行時，fadeIn被放到fx隊(duì)列中，當(dāng)slideUp完成后，從隊(duì)列中被取出運(yùn)行。queue函數(shù)允許直接操作這個鏈?zhǔn)秸{(diào)用的行為。同時，queue可以指定隊(duì)列名稱獲得其他能力，而不局限于fx隊(duì)列。

復(fù)制代碼代碼如下:

 
// 一般用法： 
$("#foo").slideUp(function() { 
alert("Animation complete."); 
}); 
// 相當(dāng)于： 
$("#foo").slideUp(); // 不提供回調(diào)，只是觸發(fā)事件 
$("#foo").queue(function() { // 把回調(diào)函數(shù)加入 
alert("Animation complete."); 
$(this).dequeue(); // 必須從隊(duì)列中取出，那么隊(duì)列中的下一個函數(shù)就有機(jī)會被調(diào)用 
}); 

queue內(nèi)部使用data或者JavaScript數(shù)組API來保存數(shù)據(jù)。其中操作數(shù)組的push和shift天生就是一組隊(duì)列API。而data可以用來保存任意數(shù)據(jù)。

復(fù)制代碼代碼如下:

 
queue: function(elem, type, data) { 
if(elem) { 
// 默認(rèn)是fn 
type = (type || "fx") + "queue"; 
// data內(nèi)部API：data(element, key, value, pvt); 
// 這里不傳入data，是為了效率的考慮。如果沒傳入data，則只是get隊(duì)列，那么就不需要以下的判斷了 
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"; // 得到這個隊(duì)列 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"); 
} 
// 執(zhí)行 
fn.call(elem, function() { 
jQuery.dequeue(elem, type); 
}); 
} 
if(!queue.length) { 
jQuery.removeData(elem, type + "queue", true); 
handleQueueMarkDefer(elem, type, "queue"); 
} 
} 