佇列是常用的資料結構之一，只允許在表的前端(隊頭)進行洗掉操作(出隊)，在表的后端(隊尾)進行插入操作(入隊)，特點是先進先出，最先插入的元素最先被洗掉，
在jQuery內部，佇列模塊為影片模塊提供基礎功能，負責存盤影片函式、自動出隊并執行影片函式，同時還要確保影片函式的順序執行，
jQuery的靜態方法含有如下API:
- $.queue(elem,type,data) ;回傳或修改匹配元素關聯的佇列,回傳最新的佇列，引數如下:
elem ;DOM元素或JavaScript物件
type ;佇列名稱，默認是標準影片fx
data ;需要設定的佇列函式，可以是空(回傳佇列)、函式(加入佇列)或函式陣列(替換佇列)
- $.dequeue(elem,type) ;用于出隊并執行匹配元素關聯的函式佇列中的下一個元素
elem ;DOM元素或JavaScript物件
type ;是佇列名稱，默認為影片佇列fx
writer by:大沙漠 QQ:22969969
jQuery/$ 實體方法(可以通過jQuery實體呼叫的):
- queue(type,data) ;回傳第一個匹配元素的函式佇列，或修改所有匹配的元素關聯的函式佇列，引數如下:
type ;佇列名稱
data ;data是可選的函式或函式陣列，引數同$.queue()的第三個引數
- dequeue(type) ;出隊并執行所有匹配元素關聯的函式佇列中的下一個函式
- delay(time,type) ;延遲函式出隊執行，通過呼叫.queue(type,data)向關聯的函式佇列中插入一個新的函式，在函式內通過setTimeout()延遲下一個函式的出隊時間，
- clearQueue(type) ;移除匹配元素關聯的函式佇列中的所有未被執行的函式，內部代碼就一句:return this.queue( type || "fx", [] );
舉個栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> </head> <body> <p>123</p> <script> function f1(){console.log('f1觸發');} //定義兩個測驗函式 function f2(){console.log('f2觸發')}; $('p').queue('test',f1); //將f1入隊，佇列名稱為test $('p').dequeue('test'); //將匹配元素的名稱為test的函式串列出隊并執行 $('p').queue(f2); //將f2放入p匹配元素的佇列中，默認為影片佇列，會自動執行， </script> </body> </html>
輸出如下:
原始碼分析
jQuery的佇列是基于資料快取模塊$.data來實作的，當呼叫$.queue()時回把函式串列以佇列名+'queue'為屬性，保存在對應的DOM元素的內部快取物件上，例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> </head> <body> <p>123</p> <script> function f1(){console.log('f1觸發');} $('p').queue('test',f1); </script> </body> </html>
我們可以在控制臺里直接從$.cache里獲取對應的屬性，如下:
document.getElementsByTagName('p')[0][$.expando]就是例子里p元素節點物件的$.expando屬性，該屬性的值會作為$.cache的某個屬性，存盤著對應這個p元素的資料快取物件(這是資料快取模塊的內容)
$.queue和$.dequeue的實作如下:
jQuery.extend({ /*略*/ queue: function( elem, type, data ) { //回傳或修改匹配元素關聯的佇列，elem是DOM元素或JavaScript物件，type是佇列名稱，data是可選的函式或函式陣列 var q; if ( elem ) { type = ( type || "fx" ) + "queue"; //修正引數type,默認為影片佇列fx,在引數type后面加上queue表示這是一個佇列 q = jQuery._data( elem, type ); //取出引數type對應的佇列 如果之前有資料則回傳該陣列 否則 q等于undefined // Speed up dequeue by getting out quickly if this is just a lookup if ( data ) { //如果傳入了data引數 if ( !q || jQuery.isArray(data) ) { //如果type佇列不存在，或者type佇列存在且data是一個陣列 q = jQuery._data( elem, type, jQuery.makeArray(data) ); //呼叫jQuery.makeArray把引數data轉換為陣列并替換佇列 } else { q.push( data ); //佇列存在且data不是一個陣列則呼叫陣列push方法把引數data放入佇列 } } return q || []; } }, dequeue: function( elem, type ) { //用于出隊并執行匹配元素關聯的函式佇列中的下一個元素 type = type || "fx"; //修正引數type,默認是"fx"; var queue = jQuery.queue( elem, type ), //獲取elem元素的type佇列 fn = queue.shift(), //呼叫shift方法取出佇列第一個函式 hooks = {}; //存放出隊的函式在執行時的資料 // If the fx queue is dequeued, always remove the progress sentinel if ( fn === "inprogress" ) { //如果出隊的是占位符"inprogress"，則丟棄再從佇列頭部出一個，只有影片佇列會設定占位符"inprogress" fn = queue.shift(); } if ( fn ) { // Add a progress sentinel to prevent the fx queue from being // automatically dequeued if ( type === "fx" ) { //如果是影片佇列 queue.unshift( "inprogress" ); //則在佇列開頭添加一個占位符"inprogress"，表示影片函式正在執行當中 } jQuery._data( elem, type + ".run", hooks ); //設定內部資料type+".run",表示引數type對應的佇列正在執行，值是hooks，它會被作為第二個引數傳遞給出隊的函式 fn.call( elem, function() { jQuery.dequeue( elem, type ); }, hooks ); //呼叫函式方法call執行出隊的函式，elem是函式執行的背景關系，即關鍵詞this指向的物件;第二個引數是封裝了jQuery.dequeue( elem, type )的函式，不會自動執行，需要在出隊的函式回傳前手動呼叫next() } if ( !queue.length ) { //如果引數type對應的佇列在出隊后成為空佇列，即所有函式都已經出隊并執行 jQuery.removeData( elem, type + "queue " + type + ".run", true ); //呼叫jQuery.removeData()方法移除引數type對應的資料快取物件 handleQueueMarkDefer( elem, type, "queue" ); //檢查匹配元素關聯的佇列(type+"queue")和計數器(type+"mark")是否完成，如果完成則觸發方法.promise()中的計數器 } } });
type默認等于fx，jQuery的影片效果也是基于Queue實作的，這個fx默認就是影片效果，對于jQuery/$ 實體方法來說，它是呼叫jQuery的靜態方法來實作的，如下:
jQuery.fn.extend({ queue: function( type, data ) { //回傳第一個匹配元素的函式佇列，或修改所有匹配的元素關聯的函式佇列，type是佇列名稱，默認是fx，data引數等同于jQuery.queue中的data引數 if ( typeof type !== "string" ) { //修正引數 當傳入的格式是queue()或queue(data) (注:data可以是函式或函式陣列)時 data =https://www.cnblogs.com/greatdesert/p/ type; type = "fx"; } if ( data =https://www.cnblogs.com/greatdesert/p/== undefined ) { //如果沒有傳入data引數， return jQuery.queue( this[0], type ); //則呼叫jQuery.queue()回傳第一個匹配元素上引數type對應的佇列 } return this.each(function() { //如果傳入了data引數 var queue = jQuery.queue( this, type, data ); //為每一個匹配元素呼叫jQuery.queue( this, type, data ),把引數(函式)入隊，或者用引數data(函式陣列)替換佇列， if ( type === "fx" && queue[0] !== "inprogress" ) { //對于影片佇列fx，且沒有影片函式正在執行,則立即出隊并執行影片函式， jQuery.dequeue( this, type ); } }); }, dequeue: function( type ) { //出隊并執行匹配元素關聯的函式佇列中的下一個函式 return this.each(function() { jQuery.dequeue( this, type ); }); }, /*略*/ })
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/36835.html
標籤：jQuery
上一篇：基礎表單驗證
下一篇：jq的ajax方法