Callbacks是jQuery 1.7引入的方法,用於管理一組具有相同方法參數的回呼函數。 Callbacks除了可以向陣列一樣可以新增、刪除、清空回調,還提供了幾種特殊模式。在不同模式下,回呼函數的生命週期和執行順序稍有不同。
產生回呼列(Callbacks)
var callbacks = $.Callbacks(flags);
參數falgs是字串,用於標示Callbacks的模式,例如在」once stopOnFalse」模式下,回呼最多只執行一遍,如果執行過程中某個回呼回傳false,同樣也中斷回調列的執行。
那麼jQuery.Callbacks使用場景在哪裡?
在很多時候需要控制一系列的函數順序執行。那麼一般就需要一個佇列函數來處理這個問題
我們看一段程式碼
function Aaron(List, callback) { setTimeout(function() { var task = List.shift(); task(); //执行函数 if (task.length > 0) { //递归分解 setTimeout(arguments.callee, 1000) } else { callback() } }, 25) } Aaron([function(){ alert('a') },function(){ alert('b') }],function(){ alert('callback') }) 分别弹出 ‘a’ , ‘b’ ,’callback’
傳入一組函數參數,靠遞歸解析,分個執行,其實就是靠setTimeout可以把函數加入到佇列結尾才執行的原理
*****但是這樣寫,是不是很麻煩? *****
我們換成jQuery提供的方式
var callbacks = $.Callbacks(); callbacks.add(function() { alert('a'); }) callbacks.add(function() { alert('b'); }) callbacks.fire(); //输出结果: 'a' 'b'
是不是便捷很多了,程式碼又很清晰,所以它是一個多用途的回調函數列表對象,提供了一種強大的方法來管理回呼函數佇列。
同時也提供幾個便捷的處理參數
once: 確保這個回呼清單只執行( .fire() )一次(像一個遞延Deferred).
# memory: 保持以前的值,將添加到這個列表的後面的最新的值立即執行調用任何回調(像一個遞延Deferred).
unique: 確保一次只能添加一個回調(所以在列表中沒有重複的回呼).
stopOnFalse: 當一個回調回傳false 時中斷呼叫
var callbacks = $.Callbacks('once'); callbacks.add(function() { alert('a'); }) callbacks.add(function() { alert('b'); }) callbacks.fire(); //输出结果: 'a' 'b' callbacks.fire(); //未执行
once的作用是使callback佇列只執行一次
Callbacks模式
預設模式:回呼列中的回呼預設可多次執行,回呼函數可重複新增。但在執行過程中,新加入的回調不執行。
once:列中的每一個回呼最多執行一遍,執行完成之後,回呼函數列被清空。
memory:在回呼執行過程中,新增新的回呼,則新的回呼也可以執行。
Unique:同一個回呼不能重複加入。
stopOnFalse:如果某個回呼如果回傳false,那麼後面的回呼都不會再執行,即使在memory模式下也是如此。
var callbacks = $.Callbacks("once memory");
回呼執行順序
回呼保存在數組中,然後通過for循環遍歷,所以列中的回調按照被添加的順序依次執行,最後添加的一般最後執行。
// Fire the items on the list var foo = function( value ) { console.log( "foo:" + value ); }; // Add another function to the list var bar = function( value ){ console.log( "bar:" + value ); }; var callbacks = $.Callbacks(); callbacks.add( foo ); callbacks.add( bar); callbacks.fire("hello"); // output: foo: hello // output: bar: hello
唯一例外的情況是如果標記是memory,如果之前fire()被呼叫過,那麼新的回呼被add()添加之後會立刻使用前一個fire的參數執行一遍。但add()之前被fire()呼叫過的回調,如果沒有使用fire()或fireWith(),不會馬上再執行一次。
其它關鍵點
回呼函數中呼叫Callbacks的fire()或fireWith()
有一種情況是在回呼函數中又呼叫了Callbacks物件的fire()或fireWith()方法,這種情況該怎麼辦?
jquery是這樣做的:在回呼中呼叫fire()或fireWith(),Callbacks物件只是保存了fire()或fireWith()的參數,並沒有立即執行列中的回呼。等callbacks中的所有回調執行完之後,再用新的參數重新執行Callbacks物件中的所有回呼。
注意:如果標記是once,回呼中執行fire或fireWith()無效。
function fn1( value ){ console.log( value ); if (value == "bar!") return false; callbacks.fire("bar!"); } function fn2( value ){ console.log( "fn2 says: " + value); } var callbacks =$.Callbacks("stopOnFalse"); callbacks.add( fn1 ); callbacks.add( fn2 ); // Outputs: foo! // Outputs: fn2 says:foo! // Outputs: bar! callbacks.fire("foo!" );
呼叫callbacks.disable()之後,callbacks無法再被enabled
呼叫disable()之後,回呼函數列就被清除了,此時使用fire或fireWith都不會有任何響應。因此,Callbacks沒有提供enable方法,因為所有回呼已經被清空了,沒有再enable的必要。
callbacks.lock()
回呼列被鎖死,再呼叫callbacks.fire()或callbacks.fireWith()都會失效。
如果是在回呼中呼叫了callbacks.lock(),則有一點需要注意:
callbacks有memory標記:目前fire()或fireWith()方法中沒有執行的回調會繼續執行,但回呼中的callbacks.fire()和callbacks.fireWith()都不會再運作。
callbacks無memory標記:所有回呼全部被清空,也就是說後面的回呼都不再執行。
奇怪的是Callbacks沒有提供unlock方法,也就是說,一旦被locked,Callbacks就永久失去了呼叫fire()或fireWith()的能力。
以上是jQuery中的Callbacks應用的重點在哪裡?的詳細內容。更多資訊請關注PHP中文網其他相關文章!