jQuery中的Callbacks應用的重點在哪裡？

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中文網其他相關文章！