首頁  >  回撥函式  > $.callbacks(flags)

返回值:jQuery jQuery.callbacks(flags)

概述

一個多用途的回撥列表對象,提供了強大的的方式來管理回撥函式列表。

$.Callbacks()的內部提供了jQuery的$.ajax() 和 $.Deferred() 基本功能元件。它可以用來作為類似基礎定義的新元件的功能。

$.Callbacks() 支援的方法,包括  callbacks.add() , callbacks.remove() callbacks.fire()  and  callbacks.disable() .

參數

flags V1.7

一個用空格標記分隔的標誌可選列表,用來改變回調列表中的行為

示例

入門描述:

以下是兩個樣品的方法命名fn1 and fn2:

jQuery 程式碼:

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

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

這些可以新增為回撥函式作為一個$.Callbacks的列表,並呼叫如下:


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

callbacks.add( fn2 );
callbacks.fire( "bar!" ); // outputs: bar!, fn2 says: bar!

這樣做的結果是,它使構造複雜的回撥列表變得簡單,輸入值可以通過儘可能多的函式根據需要輕鬆使用。

用於以上的兩個具體的方法: .add() 和 .fire() .add() 支援新增新的回撥回撥列表, 而.fire() 提供了一種用於處理在同一列表中的回撥方法的途徑.

另一種方法由$.Callbacks 的remove(),用於從回撥列表中刪除一個特定的回撥。下面是.remove() 使用的一個例子:


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

callbacks.add( fn2 );
callbacks.fire( "bar!" ); // outputs: bar!, fn2 says: bar!

callbacks.remove(fn2);
callbacks.fire( "foobar" ); 

// only outputs foobar, as fn2 has been removed.

支援的 Flags描述:

這個 flags 參數是$.Callbacks()的一個可選參數, 結構為一個用空格標記分隔的標誌可選列表,用來改變回調列表中的行為 (比如. $.Callbacks( 'unique stopOnFalse' )).

 

可用的 flags:

  • once: 確保這個回撥列表只執行一次(像一個遞延 Deferred).
  • memory: 保持以前的值和將新增到這個列表的後面的最新的值立即執行呼叫任何回撥 (像一個遞延 Deferred).
  • unique: 確保一次只能新增一個回撥(所以有沒有在列表中的重複).
  • stopOnFalse: 當一個回撥返回false 時中斷呼叫

預設情況下,回撥列表將像事件的回撥列表中可以多次觸發。

如何在理想情況下應該使用的flags的例子,見下文:

 

$.Callbacks( 'once' ):


var callbacks = $.Callbacks( "once" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );

/*
output: 
foo
*/

 

$.Callbacks( 'memory' ):


var callbacks = $.Callbacks( "memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );

/*
output:
foo
fn2 says:foo
bar
fn2 says:bar
foobar
*/

 

$.Callbacks( 'unique' ):


var callbacks = $.Callbacks( "unique" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn1 ); // repeat addition
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );

/*
output:
foo
bar
fn2 says:bar
foobar
*//code>

 

$.Callbacks( 'stopOnFalse' ):


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

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

var callbacks = $.Callbacks( "stopOnFalse");
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );

/*
output:
foo
bar
foobar
*/

因為$.Callbacks() 支援一個列表的flags而不僅僅是一個,設定幾個flags,有一個累積效應,類似“&&”。這意味著它可能結合建立回撥名單, unique  和 確保如果名單已經觸發,將有更多的回撥呼叫最新的觸發值  (i.e.$.Callbacks("unique memory")).

 

$.Callbacks( 'unique memory' ):


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

function fn2( value ){
    fn1("fn2 says:" + value);
    return false;
}
    
var callbacks = $.Callbacks( "unique memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn1 ); // repeat addition
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.add( fn2 );
callbacks.fire( "baz" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );

/*
output:
foo
fn2 says:foo
bar
fn2 says:bar
baz
fn2 says:baz
foobar
*/

Flag結合體是使用的$.Callbacks()內部的.done() 和 .fail()一個遞延容器-它們都使用 $.Callbacks('memory once').

$.Callbacks 方法也可以被分離, 為方便起見應該有一個需要定義簡寫版本:


var callbacks = $.Callbacks(),
    add = callbacks.add,
    remove = callbacks.remove,
    fire = callbacks.fire;

add( fn1 );
fire( "hello world");
remove( fn1 );

$.Callbacks, $.Deferred and Pub/Sub

pub / sub( Observer模式)背後的一般思路 是促進應用程式的鬆散耦合。而比對其他對象的方法呼叫的單個對象,一個對象,而不是另一個對象的一個特定的任務或活動,並通知當它發生。觀察家也被稱為訂閱者,我們指的出版商(或主體)觀察對象。出版商事件發生時通知會員

作為一個元件$.Callbacks()創造能力,它可以實現一個pub / sub系統只使用回撥列表。使用$.Callbacks作為主題佇列,發佈和訂閱的主題系統可以實現如下:


var topics = {};

jQuery.Topic = function( id ) {
    var callbacks,
        method,
        topic = id && topics[ id ];
    if ( !topic ) {
        callbacks = jQuery.Callbacks();
        topic = {
            publish: callbacks.fire,
            subscribe: callbacks.add,
            unsubscribe: callbacks.remove
        };
        if ( id ) {
            topics[ id ] = topic;
        }
    }
    return topic;
};

然後,可以很容易的使用這部分應用程式的發佈和訂閱感興趣的事件:


// Subscribers
$.Topic( "mailArrived" ).subscribe( fn1 );
$.Topic( "mailArrived" ).subscribe( fn2 );
$.Topic( "mailSent" ).subscribe( fn1 );

// Publisher
$.Topic( "mailArrived" ).publish( "hello world!" );
$.Topic( "mailSent" ).publish( "woo! mail!" );

// Here, "hello world!" gets pushed to fn1 and fn2
// when the "mailArrived" notification is published
// with "woo! mail!" also being pushed to fn1 when
// the "mailSent" notification is published. 

/*
output:
hello world!
fn2 says: hello world!
woo! mail!
*/

雖然這是有用的,可以採取進一步的實施。使用$.Deferreds,這是可能的,以確保發表者只為會員發佈一次特別的任務已經完成(解決)通知。這可能是如何在實踐中使用的一些進一步的評論,請參見下面的程式碼示例:


// subscribe to the mailArrived notification
$.Topic( "mailArrived" ).subscribe( fn1 );

// create a new instance of Deferreds
var dfd = $.Deferred();

// define a new topic (without directly publishing)
var topic = $.Topic( "mailArrived" );

// when the deferred has been resolved, publish a 
// notification to subscribers
dfd.done( topic.publish );

// Here the Deferred is being resolved with a message
// that will be passed back to subscribers. It's possible to
// easily integrate this into a more complex routine
// (eg. waiting on an ajax call to complete) so that
// messages are only published once the task has actually
// finished.
dfd.resolve( "its been published!" );