首页 > 代码库 > jQuery.Callbacks之demo

jQuery.Callbacks之demo

2024-07-18 10:50:11   225人阅读

jQuery.Callbacks是jquery在1.7版本之后加入的，是从1.6版中的_Deferred对象中抽离的，主要用来进行函数队 列的add、remove、fire、lock等操作，并提供once、memory、unique、stopOnFalse四个option进行一些特 殊的控制，这是jquery的官方文档：http://api.jquery.com/jQuery.Callbacks/

　　这个函数常见的应用场景是事件触发机制，也就是设计模式中的观察者（发布、订阅机制），目前Callbacks对象用于queue、ajax、Deferred对象中，这篇文章主要是一些简单的demo：

　　1、不传入任何参数，调用add的时候将函数add到内部的list中，调用fire的时候顺序触发list中的回调函数

function fn1(val){    console.log(‘fn1 says:‘ + val);}function fn2(val){    console.log(‘fn2 says ‘ + val);}var cbs = $.Callbacks();cbs.add(fn1);//fn1 says:foocbs.fire(‘foo‘);cbs.add(fn2);//fn1 says:bar//fn2 says barcbs.fire(‘bar‘);

　　2、构造函数传入once，回调函数列表只被fire一次

function fn1(val){    console.log(‘fn1 says ‘ + val);}var cbs = $.Callbacks(‘once‘);cbs.add(fn1);//fn1 says foo cbs.fire(‘foo‘);cbs.fire(‘foo‘);

　　3、构造函数传入memory，这个选项刚开始接触时有点费解，下面拿个具体例子说明一下

function fn1(val){    console.log(‘fn1 says ‘ + val);}function fn2(val){    console.log(‘fn2 says ‘ + val);}var cbs = $.Callbacks(‘memory‘);cbs.add(fn1);
//第一次fire会缓存传入的参数
//fn1 says foocbs.fire(‘foo‘);
//fire过一次之后，以后的add都会自动调用fire，传入的参数是上次fire传入的‘foo‘
//fn2 says foocbs.add(fn2);
//此次fire的参数新传入的‘bar‘
//fn1 says bar
//fn2 says barcbs.fire(‘bar‘);

 　　4、构造函数传入unique，保证在add过程中没有重复的函数

function fn1(val){    console.log(‘fn1 says ‘ + val);}var cbs = $.Callbacks(‘unique‘);cbs.add(fn1);cbs.add(fn1);//虽然添加了两次，但因为有unique这个选项，所以只会有一次输出//fn1 says foo cbs.fire(‘foo‘);

　　5、构造函数传入stopOnFalse，当顺序调用函数列表的时候，如果某一个函数的返回值为false，则break

function fn1(val){    console.log(‘fn1 says ‘ + val);}function fn2(val){    console.log(‘fn2 says ‘ + val);    return false;}function fn3(val){    console.log(‘fn3 says ‘ + val);}var cbs = $.Callbacks(‘stopOnFalse‘);cbs.add(fn1);cbs.add(fn2);cbs.add(fn3);//虽然add了三个函数，但是因为fn2的返回值是false，所以不会执行fn3这个函数//fn1 says foo//fn2 says foocbs.fire(‘foo‘);

　　上面是一些单选项的demo，下面来看几个复合选项的例子

　　6、once、memory的组合，这个也是jquery中Deferred对象初始化大部分Callbacks对象的参数（为什么 Deferred会用这对组合呢？因为这个对象只能resolve或者reject一次，改变为成功或者失败的状态之后不能再次改变，所以不能再次显示调 用fire，而只能通过add的方式继续）

function fn1(val){    console.log(‘fn1 says ‘ + val);}function fn2(val){    console.log(‘fn2 says ‘ + val);}var cbs = $.Callbacks(‘once memory‘);cbs.add(fn1);//fn1 says foo cbs.fire(‘foo‘);//因为memory的缘故，此次add自动fire，并且因为once和memory的共同原因，每次执行完之后函数队列都自动清空，所以这次只执行fn2，不执行fn1//fn2 says foo cbs.add(fn2)//因为once的缘故，显示调用fire也不会执行，如果还想fire，则只能addcbs.fire(‘bar‘);

　　7、memory stopOnFalse的组合

function fn1(val){    console.log(‘fn1 says ‘ + val);}function fn2(val){    console.log(‘fn2 says ‘ + val);    return false;}function fn3(val){    console.log(‘fn3 says ‘ + val);}var cbs = $.Callbacks(‘stopOnFalse memory‘);cbs.add(fn1);cbs.add(fn2);cbs.add(fn3);//因为stopOnFalse的缘故，这里执行fn2后的返回值是false，所以不会执行fn3//fn1 says foo //fn2 says foo cbs.fire(‘foo‘);cbs.add(fn2);cbs.add(fn3);//这里其实内部的函数队列是[fn1, fn2, fn3, fn2, fn3]，但因为执行第一个fn2的返回值是false，所以[fn1, fn2, fn3, fn2, fn3]中标红的函数不会执行//fn1 says bar//fn2 says barcbs.fire(‘bar‘);

　　这篇文章主要是几个option的应用，下次会先对源代码进行解读，然后针对源代码设计几个更高级的应用，敬请期待


联系
我们