读jQuery之二十（Deferred对象）--(转)

原博文地址：http://www.cnblogs.com/snandy/archive/2012/12/19/2812935.html

它用来解决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 jQuery.extend({
 2     Deferred: function( func ) {
 3         var tuples = [
 4                 // action, add listener, listener list, final state
 5                 [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
 6                 [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
 7                 [ "notify", "progress", jQuery.Callbacks("memory") ]
 8             ],
 9         ...
10  
11         // All done!
12         return deferred;
13     },
14     // Deferred helper
15     when: function( subordinate /* , ..., subordinateN */ ) {
16         var i = 0,
17             resolveValues = core_slice.call( arguments ),
18             length = resolveValues.length,
19             ....
20  
21         return deferred.promise();
22     }
23 });

$.Deferred的实现

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

$.when的实现

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

这就是

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

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

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

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

一、done/resolve

1 function cb() {
2     alert('success')
3 }
4 var deferred = $.Deferred()
5 deferred.done(cb)
6 setTimeout(function() {
7     deferred.resolve()
8 }, 3000)

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

二、fail/reject

1 function cb() {
2     alert('fail')
3 }
4 var deferred = $.Deferred()
5 deferred.fail(cb)
6 setTimeout(function() {
7     deferred.reject()
8 }, 3000)

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

三、progress/notify

1 function cb() {
2     alert('progress')
3 }
4 var deferred = $.Deferred()
5 deferred.progress(cb)
6 setInterval(function() {
7     deferred.notify()
8 }, 2000)

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

四、链式操作

 1 function fn1() {
 2     alert('success')
 3 }
 4 function fn2() {
 5     alert('fail')
 6 }
 7 function fn3() {
 8     alert('progress')
 9 }
10 var deferred = $.Deferred()
11 deferred.done(fn1).fail(fn2).progress(fn3) // 链式操作
12 setTimeout(function() {
13     deferred.resolve()
14     //deferred.reject()
15     //deferred.notify()
16 }, 3000)

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

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

 1 function fn1() {
 2     alert('success')
 3 }
 4 function fn2() {
 5     alert('fail')
 6 }
 7 function fn3() {
 8     alert('progress')
 9 }
10 var deferred = $.Deferred()
11 deferred.then(fn1, fn2, fn3)

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

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

 1 var deferred = $.Deferred()
 2 deferred.always(function() {
 3     var state = deferred.state()
 4     if ( state === 'resolved') {
 5         alert('success')
 6     } else if (state === 'rejected') {
 7         alert('fail')
 8     }
 9 })
10 setTimeout(function() {
11     deferred.resolve()
12     //deferred.reject()
13 }, 3000)

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

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

 1 function fn1() {
 2     alert('done1')
 3 }
 4 function fn2() {
 5     alert('done2')
 6 }
 7 function fn3() {
 8     alert('all done')
 9 }
10  
11 var deferred1 = $.Deferred()
12 var deferred2 = $.Deferred()
13  
14 deferred1.done(fn1)
15 deferred2.done(fn2)
16 $.when(deferred1, deferred2).done(fn3)
17  
18 setTimeout(function() {
19     deferred1.resolve()
20     deferred2.resolve()
21 }, 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 $.ajax(url)
2  .done(success)
3  .fail(fail)

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

1 $.ajax(url)
2  .done(success1)
3  .done(success2)
4  .fail(fail2)
5  .fail(fail2)

1.5之前的则不行

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

1 var ajax1 = $.ajax(url1)
2 var ajax2 = $.ajax(url2)
3 $.when(ajax1, ajax2).done(success)

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

飞鱼

读jQuery之二十（Deferred对象）--(转)

$.Deferred的实现

$.when的实现

公告