DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery 源碼分析筆記(7) Queue
jQuery 源碼分析筆記(7) Queue
編輯:JQuery特效代碼     
每個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");
}
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved