jQuery.Callbacks()方法

实例

向 $.Callbacks 的列表添加回调函数

$(function () { function fn1( value ) { alert( value ); } function fn2( value
) { fn1("fn2 says: " \+ value); return false; } var callbacks = $.Callbacks();
callbacks.add( fn1 ); // 输出: foo! callbacks.fire( "foo!" ); callbacks.add( fn2
); // 输出: bar!, fn2 says: bar! callbacks.fire( "bar!" ); })

试一试

定义和用法

$.Callbacks() 指一个多用途的回调函数列表对象，提供了一种强大的方法来管理回调函数列对。

提示： $.Callbacks 是在 jQuery 内部使用，如为 .ajax，$.Deferred 等组件提供基础功能的函数。它也可以用在类似功能的一些组件中，如自己开发的插件。

语法

_$_.Callbacks( flags )

参数	描述
_flags_	可选。 String类型一个用空格标记分隔的可选列表,用来改变回调列表中的行为

实例

$(function () { function fn1( value ) { alert( value ); } function fn2( value
) { fn1("fn2 says: " \+ value); return false; } var callbacks = $.Callbacks();
callbacks.add( fn1 ); // 输出: foo! callbacks.fire( "foo!" ); callbacks.add( fn2
); // 输出: bar!, fn2 says: bar! callbacks.fire( "bar!" ); callbacks.remove( fn2
); // 只输出 foobar, fn2 已经被移除。 callbacks.fire( "foobar" ); })

试一试

支持的 Flags 参数

这个 flags 参数是 $.Callbacks() 的一个可选参数，结构为一个用空格标记分隔的标志可选列表，用来改变回调列表中的行为 (比如. $.Callbacks( 'unique stopOnFalse' ))。

以下是可用的 flags:

参数	描述
_once_	确保这个回调列表只执行一次
_memory_	缓存上一次fire时的参数值，当add()添加回调函数时，直接用上一次的参数值立刻调用新加入的回调函数
_unique_	确保一次只能添加一个回调，不会重复添加	_stopOnFalse_	某个回调函数返回false之后中断后面的回调函数

下面是 $.Callbacks( "once" ) 的一个例子

实例

$(function () { function fn1( value ) { alert( value ); } function fn2( value
) { fn1("fn2 says: " \+ value); return false; } var callbacks = $.Callbacks(
"once" ); callbacks.add( fn1 ); callbacks.fire( "foo" ); callbacks.add( fn2 );
callbacks.fire( "bar" ); callbacks.remove( fn2 ); callbacks.fire( "foobar" );
/*只输出:foo*/ })

试一试

下面是 $.Callbacks( "memory" ) 的一个例子

实例

$(function () { function fn1( value ) { alert( value ); } function fn2( value
) { fn1("fn2 says: " \+ value); return false; } var callbacks = $.Callbacks(
"memory" ); callbacks.add( fn1 ); callbacks.fire( "foo" ); callbacks.add( fn2
); callbacks.fire( "bar" ); callbacks.remove( fn2 ); callbacks.fire( "foobar"
); /*输出 : foo fn2 says:foo bar fn2 says:bar foobar */ })

试一试

下面是 $.Callbacks( "unique" ) 的一个例子

实例

$(function () { function fn1( value ) { alert( value ); } function fn2( value
) { fn1("fn2 says: " \+ value); return false; } 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" ); /*输出: foo bar fn2
says:bar foobar */ })

试一试

下面是 $.Callbacks( "stopOnFalse" ) 的一个例子

实例

$(function () { function fn1( value ) { alert( 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" ); /*输出: foo bar foobar */
})

试一试

$.Callbacks() 支持一个列表设置多个flags（标识）而不仅仅是一个，有一个累积效应，类似"&&"。
下面是 $.Callbacks( 'unique memory' ) 的一个例子

实例

$(function () { function fn1( value ) { alert( 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" );
/*输出: foo fn2 says:foo bar fn2 says:bar baz fn2 says:baz foobar*/ })

试一试

$.Callbacks 方法也可以被分离, 例如：

实例

$(function () { function fn1( value ) { alert( value ); } var callbacks =
$.Callbacks(), add = callbacks.add, remove = callbacks.remove, fire =
callbacks.fire; add( fn1 ); fire( "hello world" ); remove( fn1 ); /*输出:hello
world*/ })

试一试

$.Callbacks, $.Deferred 和 Pub/Sub

pub / sub（观察者模式）背后的一般思路是促进应用程序的松散耦合和高效通信。观察家也被称为订阅者，它指向观察对象。观察者（Publisher）事件发生时通知用户。

作为 $.Callbacks() 的创建组件的一个演示，只使用回调函数列表，就可以实现 Pub/Sub 系统。将 $.Callbacks 作为一个文章队列，可以向下面这样，实现文章的发布和订阅：

实例

$(function () { function fn1( value ) { alert( value ); return false; }
function fn2( value ) { fn1( "fn2 says: " \+ value ); return false; } 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; }; //
订阅者 $.Topic( "mailArrived" ).subscribe( fn1 ); $.Topic( "mailArrived"
).subscribe( fn2 ); $.Topic( "mailSent" ).subscribe( fn1 ); // 发布者 $.Topic(
"mailArrived" ).publish( "hello world!" ); $.Topic( "mailSent" ).publish(
"woo! mail!" ); /*输出: hello world! fn2 says: hello world! woo! mail!*/ })

试一试

进一步改进使用 $.Deferreds，可以保证当特定的任务被完成（或被解决）时，发布者只能向订阅者发布通知。参见下面的示例代码：

实例

$(function () { function fn1( value ) { alert( value ); return false; }
function fn2( value ) { fn1( "fn2 says: " \+ value ); return false; } 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; }; //
订阅 mailArrived 通知 $.Topic( "mailArrived" ).subscribe( fn1 ); //
创建一个新对象替代延迟$.Deferreds var dfd = $.Deferred(); // 定义一个新的文章 (不直接发布) var topic =
$.Topic( "mailArrived" ); // 当延迟被受理, 发布一个通知给订阅者 dfd.done( topic.publish );
/*这里将被回传给订阅者的消息延迟被受理， 它尽可能整合了复杂的程序（例如等待一个 Ajax调用完成），所以事实上消息只发布了 一次。*/ // 完成。
dfd.resolve( "已经被发布!" ); })

试一试

jQuery.Callbacks()方法