读jQuery之二十（Deferred对象）

Deferred对象是由$.Deferred构造的，$.Deferred被实现为简单工厂模式。

它用来解决JS中的异步编程，它遵循 Common Promise/A 规范。实现此规范的还有 when.js 和 dojo。

$.Deferred作为新特性首次出现在版本1.5中，这个版本利用Deferred又完全重写了Ajax模块。

$.Deferred在jQuery代码自身四处被使用，分别是promise方法、DOM ready、Ajax模块、动画模块。

这里以版本1.8.3分析，由于1.7后$.Callbacks从Deferred中抽离出去了，目前版本的deferred.js代码不过150行，而真正$.Deferred的实现只有100行左右。

$.extend给标示符$上挂了两个方法，如下


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

jQuery.extend({

    Deferred: function( func ) {

        var tuples = [

                // action, add listener, listener list, final state

                [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],

                [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],

                [ "notify", "progress", jQuery.Callbacks("memory") ]

            ],

        ...

        // All done!

        return deferred;

    },

    // Deferred helper

    when: function( subordinate /* , ..., subordinateN */ ) {

        var i = 0,

            resolveValues = core_slice.call( arguments ),

            length = resolveValues.length,

            ....

        return deferred.promise();

    }

});

$.Deferred的实现

  1. 创建三个$.Callbacks对象，分别表示成功，失败，处理中三种状态
  2. 创建了一个promise对象，具有state、always、then、primise方法
  3. 通过扩展primise对象生成最终的Deferred对象，返回该对象

$.when的实现

  1. 接受若干个对象，参数仅一个且非Deferred对象将立即执行回调函数
  2. Deferred对象和非Deferred对象混杂时，对于非Deferred对象remaining减1
  3. Deferred对象总数 = 内部构建的Deferred对象 + 所传参数中包含的Deferred对象
  4. 所传参数中所有Deferred对象每当resolve时remaining减1，直到为0时（所有都resolve）执行回调

这就是$.Deferred和$.when的全部了，各个方法及使用稍后介绍。

代码阅读中会发现then和when方法的实现最难理解，看多次，后感回味无穷，非常巧妙。then内部会用到不同寻常的递归，when用到了计数，每次异步成功后减一，直到为0后表示全部异步操作成功，这时才可执行回调。

上面提到Deferred里有3个$.Callbacks的实例，Deferred自身则围绕这三个对象进行更高层次的抽象。以下是Deferred对象的核心方法

  • done/fail/progress 是 callbacks.add，将回调函数存入
  • resolve/reject/notify 是 callbacks.fire，执行回调函数(或队列)

下面举一些示例看看如何使用Deferred对象。

一、done/resolve


1

2

3

4

5

6

7

8

function cb() {

    alert(‘success‘)

}

var deferred = $.Deferred()

deferred.done(cb)

setTimeout(function() {

    deferred.resolve()

}, 3000)

在HTTP中表示后台返回成功状态（如200）时使用，即请求成功后可执行成功回调函数。

二、fail/reject


1

2

3

4

5

6

7

8

function cb() {

    alert(‘fail‘)

}

var deferred = $.Deferred()

deferred.fail(cb)

setTimeout(function() {

    deferred.reject()

}, 3000)

在HTTP中表示后台返回非成功状态时使用，即请求失败后可执行失败回调函数。

三、progress/notify


1

2

3

4

5

6

7

8

function cb() {

    alert(‘progress‘)

}

var deferred = $.Deferred()

deferred.progress(cb)

setInterval(function() {

    deferred.notify()

}, 2000)

在HTTP中表示请求过程中使用，即请求过程中不断执行回调函数。这可用在文件上传时的loading百分比或进度条。

四、链式操作


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

function fn1() {

    alert(‘success‘)

}

function fn2() {

    alert(‘fail‘)

}

function fn3() {

    alert(‘progress‘)

}

var deferred = $.Deferred()

deferred.done(fn1).fail(fn2).progress(fn3) // 链式操作

setTimeout(function() {

    deferred.resolve()

    //deferred.reject()

    //deferred.notify()

}, 3000)

这样可以很方便了添加成功，失败，进度回调函数。

五，便利函数then，一次添加成功，失败，进度回调函数


1

2

3

4

5

6

7

8

9

10

11

function fn1() {

    alert(‘success‘)

}

function fn2() {

    alert(‘fail‘)

}

function fn3() {

    alert(‘progress‘)

}

var deferred = $.Deferred()

deferred.then(fn1, fn2, fn3)

调用then后还可以继续链式调用then添加多个不同回调函数，这个then也正是jQuery对 Common Promise/A 的实现。

六、使用always方法为成功，失败状态添加同一个回调函数


1

2

3

4

5

6

7

8

9

10

11

12

13

var deferred = $.Deferred()

deferred.always(function() {

    var state = deferred.state()

    if ( state === ‘resolved‘) {

        alert(‘success‘)

    } else if (state === ‘rejected‘) {

        alert(‘fail‘)

    }

})

setTimeout(function() {

    deferred.resolve()

    //deferred.reject()

}, 3000)

回调函数中可以使用deferred.state方法获取异步过程中的最终状态，这里我调用的是deferred.resolve，因此最后的状态是resolved，表示成功。

七、when方法保证多个异步操作全部成功后才回调


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

function fn1() {

    alert(‘done1‘)

}

function fn2() {

    alert(‘done2‘)

}

function fn3() {

    alert(‘all done‘)

}

var deferred1 = $.Deferred()

var deferred2 = $.Deferred()

deferred1.done(fn1)

deferred2.done(fn2)

$.when(deferred1, deferred2).done(fn3)

setTimeout(function() {

    deferred1.resolve()

    deferred2.resolve()

}, 3000)

先后弹出了done1、done2、all done。 如果setTimeout中有一个reject了，fn3将不会被执行。

八、deferred.promise()方法返回只能添加回调的对象，这个对象与$.Deferred()返回的对象不同，只能 done/fail/progress，不能resolve/reject/notify。即只能调用callbacks.add，没有 callbacks.fire。它是正统Deferred对象的阉割版。

有了Deferred，我们使用jQuery书写ajax的风格可以这样了


1

2

3

$.ajax(url)

 .done(success)

 .fail(fail)

看似和以前比较也没什么优点，但它还可以添加多个回调


1

2

3

4

5

$.ajax(url)

 .done(success1)

 .done(success2)

 .fail(fail2)

 .fail(fail2)

1.5之前的则不行

如果多个请求完成后才算成功，1.5之前的是无法解决的，现在则可以用$.when搞定


1

2

3

var ajax1 = $.ajax(url1)

var ajax2 = $.ajax(url2)

$.when(ajax1, ajax2).done(success)

如果项目中有一些异步问题不妨用用Derferred。

相关：

http://jimliu.net/?p=64

http://www.infoq.com/cn/news/2011/09/js-promise

http://www.erichynds.com/jquery/using-deferreds-in-jquery/

http://sitr.us/2012/07/31/promise-pipelines-in-javascript.html

http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

时间： 2024-10-10 01:44:30

读jQuery之二十（Deferred对象）的相关文章

jQuery中deferred对象的使用（二）

接上一回的内容,漏了一个always()方法,参数也是回调函数,与done和fail不同的是,无论任何情况都执行always方法中的回调. deferred对象的使用(二) deferred对象不光可以用在jquery的ajax方法中,他提供了一系列的接口,使它的通用型大大提高. 比如有这样一个耗时比较久的方法 function a(){ function b(){ alert('start'); } setTimeout(b, 3000); } 如果要在这个方法之后执行某个回调,就不能用$.w

jQuery的deferred对象详解（二）

Deferred对象是由$.Deferred构造的,$.Deferred被实现为简单的工厂模式. $.Deferred的实现 创建三个$.Callbacks对象,分别表示成功done,失败fail,处理中process三种状态 对应了三种处理结果,resolve.reject.notify 创建了一个promise对象,具有state.always.then.primise方法 通过扩展primise对象生成最终的Deferred对象,是阻止其他代码来改变这个deferred对象的状态,defe

读jQuery源码 - Deferred

Deferred首次出现在jQuery 1.5中,在jQuery 1.8之后被改写,它的出现抹平了javascript中的大量回调产生的金字塔,提供了异步编程的能力,它主要服役于jQuery.ajax. Deferred就是让一组函数在合适的时机执行,在成功时候执行成功的函数系列,在失败的时候执行失败的函数系列,这就是Deferred的本质.简单的说,模型上可以规划为两个数组来承接不同状态的函数——数组resolve里的函数列表在成功状态下触发,reject中的函数在失败状态下触发. 本文原创于

【转载】学习资料存档：jQuery的deferred对象详解

我在以前的文章里提到promise和deferred,这两个东西其实是对回调函数的一种写法,javascript的难点之一是回调函数,但是我们要写出优秀的javascript代码又不得不灵活运用回调函数,大型javascript代码里都会大量运用回调函数,大量的标准回调函数写法的坏处就是使得代码的阅读性和可维护性降低,因此出现了promise模式和大量deferred库,jQuery很优秀,但是jQuery早期的版本对优雅回调写法的支持远远不够,直到jQuery1.5引入了deferred后,这

jQuery的deferred对象详解

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuery的全部ajax代码都被改写了.但是,它比较抽象,初学者很难掌握,网上的教程也不多.所以,我把自己的学习笔记整理出来了,希望对大家有用. 本文不是初级教程,针对的读者是那些已经具备

转载：jQuery的deferred对象详解

一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的. 通常的做法是,为它们指定回调函数(callback).即事先规定,一旦它们运行结束,应该调用哪些函数. 但是,在回调函数方面,jQuery的功能非常弱.为了改变这一点,jQuery开发团队就设计了deferred对象. 简单说,deferred对象就是jQuery的回调函数

jQuery的deferred对象详解（转）

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuery的全部ajax代码都被改写了.但是,它比较抽象,初学者很难掌握,网上的教程也不多.所以,我把自己的学习笔记整理出来了,希望对大家有用. 本文不是初级教程,针对的读者是那些已经具备

jQuery的Deferred对象教程

阮一峰的这往篇教程讲得非常好:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html jQuery官网文档:http://api.jquery.com/category/deferred-object/ ------------------------------------- 以下将阮一峰的教程的后半部分做一个整理,前半部分已经非常 好了 -------------

jQuery的deferred对象详解(转)

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuery的全部ajax代码都被改写了.但是,它比较抽象,初学者很难掌握,网上的教程也不多.所以,我把自己的学习笔记整理出来了,希望对大家有用. 本文不是初级教程,针对的读者是那些已经具备