小白教程
所有教程
关于
Search
172.69.6.29
172.69.6.29
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Misc callbacks”的源代码
本页内容
上一节:
Misc_jquery_readyexception
下一节:
Misc_callbacks_add
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:$.Callbacks()}}[[Category:jquery ref misc|45]] = jQuery.Callbacks()方法 = [[jquery ref misc|jQuery 杂项方法]] 向 $.Callbacks 的列表添加回调函数 <sample title="" desc="" lang="html" hererun="1"> $(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!" ); }) </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script> $(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!" ); }) </script> </body> </html> </run> == 定义和用法 == $.Callbacks() 指一个多用途的回调函数列表对象,提供了一种强大的方法来管理回调函数队列。 '''提示:''' $.Callbacks 是在 jQuery 内部使用,如为 .ajax,$.Deferred 等组件提供基础功能的函数。它也可以用在类似功能的一些组件中,如自己开发的插件。 == 语法 == $.Callbacks( flags ) {| class="table table-striped table-hover" ! 参数 ! 描述 |- | flags | 可选。 String类型 一个用空格标记分隔的可选列表,用来改变回调列表中的行为 |} == 更多实例 == 下面是使用 .remove() 从回调列表中删除一个特定的回调的例子 <sample title="" desc="" lang="html" hererun="1"> $(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" ); }) </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script> $(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" ); }) </script> </body> </html> </run> == 支持的 Flags 参数 == 这个 flags 参数是 $.Callbacks() 的一个可选参数, 结构为一个用空格标记分隔的标志可选列表,用来改变回调列表中的行为 (比如. $.Callbacks( 'unique stopOnFalse' ))。 '''以下是可用的 flags:''' 参数 描述 once 确保这个回调列表只执行一次 memory 缓存上一次fire时的参数值,当add()添加回调函数时,直接用上一次的参数值立刻调用新加入的回调函数 unique 一个回调只会被添加一次,不会重复添加 stopOnFalse 某个回调函数返回false之后中断后面的回调函数 下面是 $.Callbacks( "once" ) 的一个例子 <sample title="" desc="" lang="html" hererun="1"> $(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*/ }) </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script> $(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*/ }) </script> </body> </html> </run> 下面是 $.Callbacks( "memory" ) 的一个例子 <sample title="" desc="" lang="html" hererun="1"> $(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 */ }) </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script> $(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 */ }) </script> </body> </html> </run> 下面是 $.Callbacks( "unique" ) 的一个例子 <sample title="" desc="" lang="html" hererun="1"> $(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 */ }) </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script> $(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 */ }) </script> </body> </html> </run> 下面是 $.Callbacks( "stopOnFalse" ) 的一个例子 <sample title="" desc="" lang="html" hererun="1"> $(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 */ }) </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script> $(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 */ }) </script> </body> </html> </run> $.Callbacks() 支持一个列表设置多个flags(标识)而不仅仅是一个,有一个累积效应,类似"&&"。 下面是 $.Callbacks( 'unique memory' ) 的一个例子 <sample title="" desc="" lang="html" hererun="1"> $(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*/ }) </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script> $(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*/ }) </script> </body> </html> </run> $.Callbacks 方法也可以被分离, 例如: <sample title="" desc="" lang="html" hererun="1"> $(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*/ }) </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script> $(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*/ }) </script> </body> </html> </run> == $.Callbacks, $.Deferred 和 Pub/Sub == pub / sub(观察者模式)背后的一般思路是促进应用程序的松散耦合和高效通信。观察家也被称为订阅者,它指向观察对象。观察者(Publisher)事件发生时通知用户。 作为 $.Callbacks() 的创建组件的一个演示,只使用回调函数列表,就可以实现 Pub/Sub 系统。将 $.Callbacks 作为一个文章队列,可以向下面这样,实现文章的发布和订阅: <sample title="" desc="" lang="html" hererun="1"> $(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!*/ }) </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script> $(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!*/ }) </script> </body> </html> </run> 进一步改进使用 $.Deferreds,可以保证当特定的任务被完成(或被解决)时,发布者只能向订阅者发布通知。参见下面的示例代码: <sample title="" desc="" lang="html" hererun="1"> $(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( "已经被发布!" ); }) </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script> $(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( "它已经被发布!" ); }) </script> </body> </html> </run> [[jquery ref misc|jQuery 杂项方法]]
返回至“
Misc callbacks
”。
上一节:
Misc_jquery_readyexception
下一节:
Misc_callbacks_add