第三十四课:jQuery Deferred详解2

上一课主要分析了jQuery1.51版本的jQuery Deferred。在jQuery1.6中,jQuery Deferred添加了两个方法,always,pipe。

always用来添加回调,无论成功还是失败,都会执行。

pipe就是管道的意思,对回调使用瀑布模型,上一个回调的返回值供下一个会调使用。

我们举个例子来说明下pipe与then的区别:

var deferred = $.Deferred();  //返回的是Deferred对象

var promise = deferred.pipe(function(a){return a*2}).pipe(function(a){return a*4;})   //pipe方法的返回值是Promise对象,因此promise与deferred不相等。

deferred.resolve(5);     //执行这个函数后,就会调用pipe添加进来的回调函数。第一个回调函数中的a=5,然后返回10给第二个回调函数,因此第二个回调中的a=10。

$.Deferred().then(function(a){return a*2;}).then(function(a){return a*4;}).resolve(5);

第一个回调函数中的a=5,第二个回调函数中的a=10,跟pipe方法一样。它们的区别是then方法返回的是Deferred对象,因而可以进行链式操作,而pipe方法返回的是Promise对象,不能进行链式操作。

在这个版本的jQuery中,Deferred开始在jQuery内部大规模应用了,包括queue模块,Ajax模块。

举个很好的例子:

var stuff1 = function(deferred){

  setTimeout(function(){deferred.resolve()},1000);

};

var stuff2 = function(deferred){

  setTimeout(function(){deferred.resolve()},500);

};

var stuff3 = function(deferred){

  setTimeout(function(){deferred.resolve()},800);

};

var stuff4 = function(deferred){

  setTimeout(function(){deferred.resolve()},800);

};

$.when(    //此方法接受了三个Deferred对象,只有等这三个Deferred对象的状态结束后(也就是执行了各自的resolve方法后),才会执行then添加的回调方法。

  $.Deferred(stuff1),   //此方法会执行stuff1方法,并且把新创建的Deferred对象传进去,返回此Deferred对象,1秒后,调用此Deferred对象的resolve方法。

  $.Deferred(stuff2),   //同上,只是异步处理的时间不一样。

  $.Deferred(stuff3)    //同上,这里的setTimeout的异步处理,我们可以当做是ajax请求的时间长度。

).then(stuff4);   //给$.when()方法返回的Deferred对象添加回调函数stuff4。等when方法中传入的所有Deferred对象的状态结束后,就会执行此回调stuff4.

这段代码的理解你可以当做是:有三个ajax请求,请求的地址不一样,我们需要等这三个ajax请求都返回后,把这三个请求回来的数据进行整合处理,才能进行最后一个ajax请求。

jQuery1.7添加了Callbacks模块,具体可以看:http://www.cnblogs.com/chaojidan/p/4165818.html。

而且也改写了Deferred模块。这个时候的Deferred,它是一个三链结构(doneList,failList,progressList)。progressList链添加了三个API,progress,notify,notifyWith,用来给此链添加回调和触发回调。progressList链是用来干嘛的?我们知道成功队列doneList与失败队列failList都是一次性的,也就是说触发了一次就不能再触发了。但是有时,我们需要反复触发,那么就可以用progressList来解决。

举个例子:

var a = $.Deferred();

a.done(function(x){console.log(x);}).done(function(x){console.log(x)});

a.resolve(1);

如果大家看了上一课的jQuery Deferred的源码,就知道,创建了一个新的延迟对象a,然后通过done方法添加了两个成功回调函数,最后通过resolve方法触发a的成功回调,因此会执行这两个成功回调函数,打印出两个1.

这时如果你再调用a.resolve(2);再次触发a的成功回调,不会打印出两个1.

但是progressList可以,

var b = $.Deferred();

b.progress(function(x){console.log(x);}).progress(function(x){console.log(x)});

b.notify(1);

b.notify(2);

第一个notify会打印出两个1,第二个notify会打印出两个2.

从上面的例子中,大家可以看出,doneList,failList触发一次状态后,就会结束了,你后面再次触发同样的状态,是不会执行回调函数的。但是progressList可以触发多次状态,也就意味着你只要调用notify,就会执行progress添加的回调函数。

jQuery1.8又对Deferred进行了重构,不过思路是一致的。

Promise/A隶属于Promise规范,而Promise规范则又隶属于CommonJS。

Promise/A规范大概是这样描述的:一个带有then方法的对象,它拥有3个状态,fulfilled,rejected,pending。then方法可以传入三个函数,一个是成功时执行的回调函数onFulfill,一个是失败时执行的回调函数onReject,一个是进行中执行的回调函数onNotify,它不会改变对象的状态(刚开始对象就处于pending,当执行成功回调函数onFulfill后,对象就会变成fulfilled状态,当执行失败回调函数onReject后,对象就会变成rejected状态,当执行进行中回调函数onNotify后,对象状态不会改变,还是pending状态)。这三个函数都是可选的,如果是非函数,就忽略掉。then方法会返回一个新的Promise对象,以便能够实现链式操作。

后来人们在Promise/A的规范上添加了更多的细节,形成了Promise/A+规范。现在市面上有三大Promise/A+库,分别是:Q,RSVP,when。其中,Q的微缩版被整进angular.js,RSVP被整进了ember.js。这两个库就是著名的MVVM库。后面的章节将会讲到这两个库,我也很期待。

js异步处理的前景

未来的javascript将支持yield生成器(generator),目前只有Firefox浏览器有,但是需要自己打开实验性开关。

<script type="text/javascript; version=1.7">    //这里改成1.8也行

  //这里面就可以使用yield了

</script>

此yield,可以让我们轻松的以同步的形式写出异步的代码。你只需要将它们放到某个函数体内。相应的库有:taskjs,gens,tamejs等。

有人对各种不同实现的异步库进行性能评测,基于原生生成器的库总体上占优势。yield语句比回调更能及时的工作,耗时更少。

但是在目前,实现生成器的代码量非常大,而实现Promise则相对轻松一些,因此Promise是当下最廉价的异步方案。

yield还没有真正的发展起来,因此不用精读。知道有这么一个东西就行。

下一课,将讲解Ajax,大家可以先去看一下Ajax Hacks这本书。

加油!

时间: 2024-11-03 11:34:32

第三十四课:jQuery Deferred详解2的相关文章

第三十六课:Ajax详解2

本课主要教大家如何书写一个完整的ajax模块,讲解的代码主要跟ajax有关,而jQuery的ajax模块添加了Deferred异步编程的机制,因此对ajax的理解难度增大,还是忽略掉.但是我要讲解的代码跟jQuery的ajax模块思路是一样的,只是没有加入Deferred异步编程的思想,这样更有利于大家理解ajax的原理. $.ajax = function(opts){    //大家如果用过jQuery的ajax,应该记得$.ajax({url:...,data:....,type:'POS

第三十九课:requestAnimationFrame详解

大家应该都知道,如果一个页面运行的定时器很多,无论你怎么优化,最后肯定会超过指定时间才能完成动画.定时器越多,延时越严重. 为此,YUI,kissy等采用中央队列的方式,将定时器减少至一个.浏览器厂商也因此原生支持了requestAnimationFrame方法,此方法基本上能保证每秒刷新60次.但是此方法在还没形成标准之前,很多低版本浏览器是不支持的,比如:IE9以及以下版本,不过谷歌和火狐都用私有的方法名实现了requestAnimationFrame方法.比如:谷歌:webkitReque

第三十四课 二维数组的存储 【项目1-3】

第三十四课 二维数组的存储 项目一[二维数组当函数参数] 定义一个函数来完成对参数数组中元素的求和工作,函数声明如下: [cpp] view plain copy print? int sum(int array[ ][4],int m,int n);  //该函数完成对array数组中的前m行和n列元素求和 在以下程序的基础上,完成对sum函数的定义. [cpp] view plain copy print? #include <stdio.h> int sum(int array[ ][4

三十九、git add详解

一.前言git add命令主要用于把我们要提交的文件的信息添加到索引库中.当我们使用git commit时,git将依据索引库中的内容来进行文件的提交.二.基本git add <path>表示 add to index only files created or modified and not those deleted 我通常是通过git add <path>的形式把我们<path>添加到索引库中,<path>可以是文件也可以是目录.git不仅能判断出&

“全栈2019”Java第五十四章:多态详解

难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第五十四章:多态详解 下一章 "全栈2019"Java第五十五章:方法的静态绑定与动态绑定 学习小组 加入同步学习小组,共同交流与进步. 方式一:关注头条号Gorhaf,私信"Java学习小组". 方式二:关注公众号Gorhaf,回复"Java学习小组"

JAVA学习第三十四课(常用对象API)- 集合框架(二)—List集合及其子类特点

整个集合框架中最常用的就是List(列表)和Set(集) 一.List集合 && Set的特点 Collection的子接口: 1.List:有序(存入和取出的顺序一致),元素都有索引且可以重复    API文档解释:有序的 collection(也称为序列).此接口的用户可以对列表中每个元素的插入位置进行精确地控制.用户可以根据元素的整数索引(在列表中的位置)访问元素,并搜索列表中的元素. 2.Set:元素不能重复,无序,有可能会有序    API文档解释:一个不包含重复元素的 coll

JAVA学习第三十四课 (经常使用对象API)—List集合及其子类特点

整个集合框架中最经常使用的就是List(列表)和Set(集) 一.List集合 && Set的特点 Collection的子接口: 1.List:有序(存入和取出的顺序一致),元素都有索引且能够反复    API文档解释:有序的 collection(也称为序列).此接口的用户能够对列表中每一个元素的插入位置进行精确地控制.用户能够依据元素的整数索引(在列表中的位置)訪问元素,并搜索列表中的元素. 2.Set:元素不能反复,无序,有可能会有序    API文档解释:一个不包括反复元素的 c

第三十四课 Spark中任务处理的Stage划分和Task最佳位置算法

本节课的内容 1.     Job Stage的划分算法 2.     Task最佳计算位置算法 一.Stage划分算法 由于Spark的算子构建一般都是链式的,这就涉及了要如何进行这些链式计算,Spark的策略是对这些算子,鲜花分Stage,然后在进行计算. 由于数据是分布式的存储在各个节点上的,所以为了减少网络传输的开销,就必须最大化的追求数据本地性,所谓的数据本地性是指,在计算时,数据本身已经在内存中或者利用已有缓存无需计算的方式获取数据. 1.      Stage划分算法思想 (1)一

AGG第三十四课 stroke_aa和outline_aa渲染线段效率对比

1 渲染代码 void TestStrokeAAPerformance() { agg::rendering_buffer &rbuf = rbuf_window(); agg::pixfmt_bgr24 pixf(rbuf); typedef agg::renderer_base<agg::pixfmt_bgr24> renderer_base_type; renderer_base_type renb(pixf); typedef agg::renderer_scanline_aa