jQuery.Callbacks之demo
来源:互联网 发布:音视频矩阵怎么控制 编辑:程序博客网 时间:2024/05/16 07:39
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');
- jQuery.Callbacks之demo
- jQuery.Callbacks之demo
- jQuery源码之Callbacks详解
- jquery源码分析之Callbacks
- jQuery源码阅读之jQuery.Callbacks ()
- jQuery Callbacks
- jQuery.Callbacks
- jQuery.Callbacks()
- JQuery日记6.9 Promise/A之Callbacks
- jQuery之Callbacks函数功能测试
- jQuery.Callbacks(flags)
- 阅读jquery--Callbacks
- jQuery Callbacks使用
- 学习jQuery.Callbacks
- JQuery源码浅析: Callbacks
- jquery.Callbacks的实现
- jquery.Callbacks的实现
- jQuery callbacks函数
- dsoframer控件-jsp在线编辑offic文档
- 我是如何自学android,资料分享2015版
- 约瑟夫问题
- JAVA中的 JSON 解析
- Linux常用命令
- jQuery.Callbacks之demo
- python字符串
- Laravel框架数据库CURD操作、连贯操作总结
- 二叉树系列--层序遍历(java实现)
- 苹果开发 笔记(78)键盘
- JAVA程序的运行机制和JAVA虚拟机理解
- <<重载
- 不使用库函数将整数转换为字符串或将字符串转换为整数
- Android View和ViewGroup