首頁 >web前端 >js教程 >jQuery中的Callbacks應用的重點在哪裡?

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

伊谢尔伦
伊谢尔伦原創
2017-06-16 14:43:541172瀏覽

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn