jQuery.Callbacks之demo

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:foo
cbs.fire(‘foo‘);
cbs.add(fn2);
//fn1 says:bar
//fn2 says bar
cbs.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 foo
cbs.fire(‘foo‘);//fire过一次之后,以后的add都会自动调用fire,传入的参数是上次fire传入的‘foo‘//fn2 says foo
cbs.add(fn2);//此次fire的参数新传入的‘bar‘//fn1 says bar//fn2 says bar
cbs.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 foo
cbs.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,则只能add
cbs.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 bar
cbs.fire(‘bar‘);

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

jQuery.Callbacks之demo

时间: 2024-10-11 17:47:26

jQuery.Callbacks之demo的相关文章

jQuery.callbacks 注释

1 (function( jQuery ) { 2 3 // String to Object flags format cache 4 var flagsCache = {}; 5 6 // Convert String-formatted flags into Object-formatted ones and store in cache 7 // 将字符串形式的flags转换成对象形式,并且存到cache中,例: "once memory" => {"once&

jQuery -> Callbacks

Callbacks 是jQuery 1.7之后新加的一个工具,用于管理callback lists(函数数组) 作为码农,经常被灌输这样的逻辑: 真正厉害的不是写多么复杂的代码,而是写简单易懂的代码. 不明就里的人则会把她作为衡量代码质量的准则,并抓住每一个抱怨的机会说道,"这代码真复杂,是给人看的吗!". 关于Callbacks的基本使用,可以移步到Callbacks API 下面说一下创建Callbacks对象时使用的四个参数类型 once 确保只能fire一次,由全局变量fire

代码:jquery自定义插件 demo

jquery自定义插件 demo 2016-1-13 只是一个简易的示例 <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $.fn.portamento = function

jQuery回调、递延对象总结(一)jQuery.Callbacks详解

前言: 作为参数传递给另一个函数执行的函数我们称为回调函数,那么该回调又是否是异步的呢,何谓异步,如:作为事件处理器,或作为参数传递给 (setTimeout,setInterval)这样的异步函数,或作为ajax发送请求,应用于请求各种状态的处理,我们可以称为异步回调,jQuery.Callbacks 为我们封装了一个回调对象模块,我们先来看一个应用场景: // 为什么jQuery中的ready事件可以执行多个回调,这得益于我们的jQuery.Deferred递延对象(是基于jQuery.Ca

jquery Callbacks方法实现

版本:1.7.1 jQuery.Callbacks(flags) 调用Callbacks方法后,返回一个用于处理回调函数队列的对象,对象包含有add,remove,fire,fireWith,fired,lock,locked,disable, disabled,has,empty方法用于管理和操作回调函数队列,回调函数队列以数组的形式存储在函数Callbacks作用域内,通过闭包机制返回的回调对象操作回调函数队列. 参数flags 取值:once memory unique stopOnFal

JQuery UI dialog Demo

原文:JQuery UI dialog Demo 源代码下载地址:http://www.zuidaima.com/share/1550463533812736.htm 小例子

瀑布流插件|jquery.masonry|使用demo

Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery.masonry的跑通demo</title> <script type=

jQuery BlockUI Plugin Demo

1.Login Form $(document).ready(function() { $('#demo1').click(function() { $.blockUI({ message: $('#loginForm') }); setTimeout($.unblockUI, 2000); }); }); 2.iPhoto (ish) $(document).ready(function() { $('#demo2').click(function() { $.blockUI({ css: {

jQuery Callbacks应用关键点

Callbacks是jQuery 1.7引入的方法,用于管理一系列使用相同参数的回调函数.所有回调函数(以下简称回调)保存在一个数组中,可以重复调用.其本质相当于一个回调函数列(List),因此可以做添加.删除.清空回调函数等操作. 生成回调列(Callbacks) var callbacks = $.Callbacks(); 回调执行顺序 回调保存在数组中,然后通过for循环遍历,所以列中的回调按照被添加的顺序依次执行,最后添加的一般最后执行. // Fire the items on the