每個Element可以擁有多個隊列，但是基本上都只使用到一個，即默認的fn隊列。隊列允許一系列函數(shù)被異步地調(diào)用而不會阻塞程序。例如：$("#foo").slideUp().fadeIn();其實這個就是我們大家常用的鏈式調(diào)用，實際上這是一個Queue。所以隊列和Deferred地位類似，是一個內(nèi)部使用的基礎(chǔ)設施。當slideUp運行時，fadeIn被放到fx隊列中，當slideUp完成后，從隊列中被取出運行。queue函數(shù)允許直接操作這個鏈式調(diào)用的行為。同時，queue可以指定隊列名稱獲得其他能力，而不局限于fx隊列。
代碼如下:
// 一般用法：
$("#foo").slideUp(function() {
alert("Animation complete.");
});
// 相當于：
$("#foo").slideUp(); // 不提供回調(diào)，只是觸發(fā)事件
$("#foo").queue(function() { // 把回調(diào)函數(shù)加入
alert("Animation complete.");
$(this).dequeue(); // 必須從隊列中取出，那么隊列中的下一個函數(shù)就有機會被調(diào)用
});
queue內(nèi)部使用data或者JavaScript數(shù)組API來保存數(shù)據(jù)。其中操作數(shù)組的push和shift天生就是一組隊列API。而data可以用來保存任意數(shù)據(jù)。
代碼如下:
queue: function(elem, type, data) {
if(elem) {
// 默認是fn
type = (type || "fx") + "queue";
// data內(nèi)部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");
}
// 執(zhí)行
fn.call(elem, function() {
jQuery.dequeue(elem, type);
});
}
if(!queue.length) {
jQuery.removeData(elem, type + "queue", true);
handleQueueMarkDefer(elem, type, "queue");
}
}
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
