jQuery.Callbacks一般開(kāi)發(fā)者接觸的很少，雖然jQuery向開(kāi)發(fā)者提供了外部接口調(diào)用，但是$.Callbacks()模塊的開(kāi)發(fā)目的是為了給內(nèi)部$.ajax() 和 $.Deferred()模塊提供統(tǒng)一的基本功能組件。它可以用來(lái)作為類似基礎(chǔ)定義的新組件的功能。

jQuery.Callbacks是jquery在1.7版本之后加入的，是從1.6版中的_Deferred對(duì)象中抽離的，主要用來(lái)進(jìn)行函數(shù)隊(duì)列的add、remove、fire、lock等操作，并提供once、memory、unique、stopOnFalse四個(gè)option進(jìn)行一些特殊的控制。

這個(gè)函數(shù)常見(jiàn)的應(yīng)用場(chǎng)景是事件觸發(fā)機(jī)制，也就是設(shè)計(jì)模式中的觀察者模式的發(fā)布、訂閱機(jī)制，目前Callbacks對(duì)象用于queue、ajax、Deferred對(duì)象中，本小節(jié)主要是一些簡(jiǎn)單的例子去理解的使用。

我們看官網(wǎng)提供的demo：

function fn1(value) {
  console.log(value);
}

function fn2(value) {
  fn1("fn2 says: " + value);
  return false;
}

可以將上述兩個(gè)方法作為回調(diào)函數(shù)，并添加到 $.Callbacks 列表中，并按下面的順序調(diào)用它們:

var callbacks = $.Callbacks();
callbacks.add(fn1);
// outputs: foo!
callbacks.fire("foo!");
callbacks.add(fn2);
// outputs: bar!, fn2 says: bar!
callbacks.fire("bar!")

這樣做的結(jié)果是，當(dāng)構(gòu)造復(fù)雜的回調(diào)函數(shù)列表時(shí)，將會(huì)變更很簡(jiǎn)單。可以根據(jù)需要，很方面的就可以向這些回調(diào)函數(shù)中傳入所需的參數(shù)。

上面的例子中，我們使用了 $.Callbacks() 的兩個(gè)方法: .add() 和 .fire()。 .add() 和 .fire() .add() 支持添加新的回調(diào)列表, 而.fire() 提供了一種用于處理在同一列表中的回調(diào)方法的途徑。

另一種方法是$.Callbacks 的.remove()方法，用于從回調(diào)列表中刪除一個(gè)特定的回調(diào)。下面是.remove()使用的一個(gè)例子:

var callbacks = $.Callbacks();
callbacks.add( fn1 );
// outputs: foo!
callbacks.fire( "foo!" );
callbacks.add( fn2 );
// outputs: bar!, fn2 says: bar!
callbacks.fire( "bar!" );
callbacks.remove( fn2 );
// only outputs foobar, as fn2 has been removed.
callbacks.fire( "foobar" );

這個(gè)運(yùn)用內(nèi)部就是觀察者模式的一種設(shè)計(jì)實(shí)現(xiàn)，只是相對(duì)比較復(fù)雜。我們看看jQuery的回調(diào)函數(shù)到底為哪些模塊服務(wù)？

異步隊(duì)列模塊：

Deferred: function(func) {
  var tuples = [
    // action, add listener, listener list, final state
    ["resolve", "done", jQuery.Callbacks("once memory"), "resolved"],
    ["reject", "fail", jQuery.Callbacks("once memory"), "rejected"],
    ["notify", "progress", jQuery.Callbacks("memory")]
  ]，………….

隊(duì)列模塊

_queueHooks: function(elem, type) {
  var key = type + "queueHooks";
  return data_priv.get(elem, key) || data_priv.access(elem, key, {
    empty: jQuery.Callbacks("once memory").add(function() {
      data_priv.remove(elem, [type + "queue", key]);
    })
  });
}

Ajax模塊

ajax: function(url, options) {
  //省略代碼
  deferred = jQuery.Deferred(),
  completeDeferred = jQuery.Callbacks("once memory")
    ..............
}

不難發(fā)現(xiàn)jQuery.Callbacks還提供“once memory”等參數(shù)用來(lái)處理：

   ?  once: 確保這個(gè)回調(diào)列表只執(zhí)行（ .fire() ）一次(像一個(gè)遞延 Deferred)。

   ?  memory: 保持以前的值，將添加到這個(gè)列表的后面的最新的值立即執(zhí)行調(diào)用任何回調(diào) (像一個(gè)遞延 Deferred)。

   ?  unique: 確保一次只能添加一個(gè)回調(diào)(所以在列表中沒(méi)有重復(fù)的回調(diào))。

   ?  stopOnFalse: 當(dāng)一個(gè)回調(diào)返回false 時(shí)中斷調(diào)用。

var callbacks = $.Callbacks('once');

callbacks.add(function() {
  alert('a');
})

callbacks.add(function() {
  alert('b');
})

callbacks.fire(); //輸出結(jié)果: 'a' 'b'
callbacks.fire(); //未執(zhí)行

once的作用是使callback隊(duì)列只執(zhí)行一次。

OK，我們大概知道這個(gè)是干嘛用的了，可以開(kāi)始上正菜了，（下一節(jié)開(kāi)始噢！）