jquery源码分析(五)——Deferred 延迟对象

javascript的异步编程

　　为什么要使用异步编程？

　　JS是单线程语言，就简单性而言，把每一件事情（包括GUI事件和渲染）都放在一个线程里来处理是一个很好的程序模型，因为这样就无需再考虑线程同步这些复杂问题。然而从另一方面来看，它也暴露了实际开发中的一个严重问题，单线程环境看起来对用户请求响应迅速，但是当线程忙于处理其它事情时，就不能对用户的鼠标点击和键盘操作做出响应。因此提出了异步需求，以此来解放当前线程，可以处理其他业务，待回调请求数据返回再发起回来处理。

　　何谓异步？关于这个问题，司徒正美给出以下解释：

　　笼统地说，异步在javascript就是延时执行。严格来说，javascript中的异步编程能力都是由BOM与DOM提供的，如setTimeout，XMLHttpRequest，还有DOM的事件机制，还有HTML5新增加的webwork, postMessage，等等很多。这些东西都有一个共同的特点，就是拥有一个回调函数，实现控制反转。由于控制反转是更深奥的问题，这里不想展开。不过有点可以确认的，回调函数的存在打断了原来的执行流程，让它们自行在适当的时机出现并执行，这是个非常便捷的模式。对比主动式的轮询，你就知它多么节能。

相比在同步编程，代码基本上自上向下执行，在异步编程，处理异步请求或订阅返回结果的代码就要写到回调函数中，由于代码之间存在依赖，回调函数套回调函数的情况也司空见惯了，这种套嵌结构对以后的维护来说简直是地狱噩梦。由此引出另外一个我们不得不面对的问题，try...catch无法捕捉几毫秒之后发生的异常。另外，除了setTimeout外，异步编程基本上由事件机制承担的，它们的回调函数什么时候发生基本上都是未知数，可能由于后台发生系统级错误，无法再发出响应，或者，系统忙碌，一时半刻响应不过来，这两种情况我们也必需提供一个策略，中断这操作，也就是所谓的abort，这些都是异步编程的所要处理的课题

　　

　　Deferred对象是用来解决JS中的异步编程，它遵循 Common Promise/A 规范，在jQuery代码自身代码中有四处使用地方，分别是promise方法、DOM ready、ajax模块、动画模块。既然谈到 Common Promise/A 规范就先来了解下这个规范说了什么。

　　Promise（中文翻译：承诺）其实为一个有限状态机，共有三种状态：pending（执行中）、resolve（执行成功）和rejected（执行失败）。

　　其中pending为初始状态，resolve和rejected为结束状态（结束状态表示promise的生命周期已结束）。状态转换关系为：

　　　　pending->resolve，pending->rejected。

　　随着状态的转换将触发各种事件（如执行成功事件、执行失败事件等）。promise以未完成的状态开始，如果成功它将会是完成态，如果失败将会是失败态。当一个promise移动到完成态，所有注册到它的成功回调将被调用，而且会将成功的结果值传给它。另外，任何注册到promise的成功回调，将会在状态机切换到完成状态以后立即被调用。

来看下代码的实现：

Deferred: function( func ) {
        var tuples = [//依赖了Calback回调队列管理。
                // 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") ]
            ],//tuples 创建三个$.Callbacks对象，分别表示成功，失败，处理中三种状态

　　　　　　　state = "pending",
            promise = {
                state: function() {//state的get访问器：通过闭包访问状态机的状态，确保只能访问到Deferred对象的state，而无法修改state
                    return state;
                },
                always: function() {//无论最终状态为成功抑或是失败都会触发always，根据state执行deferred对象的成功回调或失败回调
                    deferred.done( arguments ).fail( arguments );
                    return this;
                },
                then: function( /* fnDone, fnFail, fnProgress */ ) {
                    var fns = arguments;
                    return jQuery.Deferred(function( newDefer ) {
                        jQuery.each( tuples, function( i, tuple ) {//逐一定义deferred对象成功、失败、执行中的处理函数执行之后的处理函数。
                            var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
                            // deferred[ done | fail | progress ] for forwarding actions to newDefer
                            deferred[ tuple[1] ](function() {
                                var returned = fn && fn.apply( this, arguments );
                                if ( returned && jQuery.isFunction( returned.promise ) ) {
                                    returned.promise()
                                        .done( newDefer.resolve )
                                        .fail( newDefer.reject )
                                        .progress( newDefer.notify );
                                } else {
                                    newDefer[ tuple[ 0 ] + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
                                }
                            });
                        });
                        fns = null;
                    }).promise();
                },
                // Get a promise for this deferred
                // If obj is provided, the promise aspect is added to the object
                promise: function( obj ) {
                    return obj != null ? jQuery.extend( obj, promise ) : promise;
                }
            },
            deferred = {};

        // Keep pipe for back-compat
        promise.pipe = promise.then;

        // Add list-specific methods
        jQuery.each( tuples, function( i, tuple ) {//回调函数的存入
            var list = tuple[ 2 ],
                stateString = tuple[ 3 ];

            // promise[ done | fail | progress ] = list.add
            promise[ tuple[1] ] = list.add;//设计精妙，在状态机上挂载 done | fail | progress 方法，实际应用对应为Callback对象的add方法

            // Handle state
            if ( stateString ) {//如果存在最终状态：成功或失败都存在最终状态，处理中不存在undefined
                list.add(function() {
                    // state = [ resolved | rejected ]
                    state = stateString;

                // [ reject_list | resolve_list ].disable; progress_list.lock
                }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );//给当前回调队列Callback增加三个回调函数，i^1为异或 成功则修改失败回调队列disable(不执行)，失败则修改成功回调队列disable不执行
            }

            // deferred[ resolve | reject | notify ]
            deferred[ tuple[0] ] = function() {//定义触发函数
                deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );
                return this;
            };
            deferred[ tuple[0] + "With" ] = list.fireWith;
        });

        // Make the deferred a promise
        promise.promise( deferred );//扩展deferred，继承promise属性——即赋予deferred对象状态机属性

        // Call given func if any
        if ( func ) {
            func.call( deferred, deferred );
        }

        // All done!
        return deferred;
    },

    // Deferred helper
    when: function( subordinate /* , ..., subordinateN */ ) {
        var i = 0,
            resolveValues = slice.call( arguments ),
            length = resolveValues.length,

            // the count of uncompleted subordinates
            remaining = length !== 1 || ( subordinate && jQuery.isFunction( subordinate.promise ) ) ? length : 0,

            // the master Deferred. If resolveValues consist of only a single Deferred, just use that.
            deferred = remaining === 1 ? subordinate : jQuery.Deferred(),

            // Update function for both resolve and progress values
            updateFunc = function( i, contexts, values ) {
                return function( value ) {
                    contexts[ i ] = this;
                    values[ i ] = arguments.length > 1 ? slice.call( arguments ) : value;
                    if ( values === progressValues ) {
                        deferred.notifyWith( contexts, values );

                    } else if ( !(--remaining) ) {
                        deferred.resolveWith( contexts, values );
                    }
                };
            },

            progressValues, progressContexts, resolveContexts;

        // add listeners to Deferred subordinates; treat others as resolved
        if ( length > 1 ) {
            progressValues = new Array( length );
            progressContexts = new Array( length );
            resolveContexts = new Array( length );
            for ( ; i < length; i++ ) {
                if ( resolveValues[ i ] && jQuery.isFunction( resolveValues[ i ].promise ) ) {
                    resolveValues[ i ].promise()
                        .done( updateFunc( i, resolveContexts, resolveValues ) )
                        .fail( deferred.reject )
                        .progress( updateFunc( i, progressContexts, progressValues ) );
                } else {
                    --remaining;
                }
            }
        }

        // if we're not waiting on anything, resolve the master
        if ( !remaining ) {
            deferred.resolveWith( resolveContexts, resolveValues );
        }

        return deferred.promise();
    }

(一)、首先来理解下deferred功能：

　　1、异步队列是一个链式对象，增强对回调函数Callback的管理和调用，用于处理异步任务。

　　2、异步队列有三种状态：处理中（progress），成功（resolved），失败（rejected）。

　　3、执行哪些回调函数依赖于状态，状态变为成功（resolved）或失败（rejected）后，将保持不变。

　　4、回调函数的绑定可以是同步，也可以是异步的，即可以在任何时候绑定

(二)、$.Deferred的实现

1、首先代码中定义tuples数组：这个数组是干嘛的呢？

　　　　(1)、tuples[i][0]：定义deferred对象的触发回调函数列表执行(函数名)：deferred.resolve,deferred.reject,deferred.notify

　　　　(2)、tuples[i][1]：同上，定义添加回调函数的函数名：done、fail、progress

　　　　(3)、tuples[i][2]：这里依赖$.Callbacks对象，用它创建了三个$.Callbacks对象，分别管理成功，失败，处理中回调函数队列

　　　　(4)、tuples[i][3]：deferred最终状态（第三组数据除外）: 定义了成功最终状态(resolved),失败的最终状态(rejected)

　　2、创建了一个状态机promise对象，具有state、always、then、primise方法

(1)state：获取闭包属性state。默认pending；

　　　　(2)always：设置deferred对象成功和失败处理队列，根据state执行deferred对象的成功回调或失败回调

　　　　(3)then:

　　　　(4)promise:将赋予对象状态机特性（内部同过$.extend来扩展）,即新对象将拥有state、always、then、primise方法，即状态机的属性

　　3、jQuery.each遍历tuples：设置promise对象done,fail,progress属性引用Callback对象add方法，同时给deferred对象扩充6个方法

　　　　(1)resolve/reject/notify 类似 Callbacks.fire，调用对应**With，执行回调函数

　　　　(2)resolveWith/rejectWith/notifyWith 是 Callbacks.fireWith 队列方法引用

　　4、通过扩展primise对象生成最终的Deferred对象，返回该对象。如下图：

从上图可以清晰看出：deferred对象的state、always 、promise、then是从promise对象扩展而来的，其他方法pipe <==>then ，

done、fail、progress是对象三个Callback对象的回调add方法；——回调方法/事件订阅

reject、resolve、notify为触发相应执行回调队列的fire方法——通知方法/事件发布

rejectWith、resolveWith、notifyWith为执行相应回调队列的fireWidth方法——通知方法/事件发布

 (三)、具体来分析deferred对象上的方法：

　　(1)、deferred.done()——  订阅状态为成功（resolved）时回调函数，保存到对应的Callback对象

　　(2)、deferred.fail()——  订阅状态为失败（rejected）时回调函数，保存到对应Callback对象

　　(3)、deferred.progress()——订阅状态为处理中（pending）时回调函数，保存到对应Callback对象

　　(4)、deferred.then()——增加成功回调函数和失败回调函数到各自的队列中；两个参数可以是数组或null，状态为成功（resolved）时立即调用成功回调函数，状态为失败（rejected）时立即调用失败回调函数

　　(5)、deferred.always()——增加回调函数，同时增加到成功队列和失败队列，状态已确定（无论成功或失败）时立即调用回调函数

　　(6)、deferred.resolve()——通过调用deferred.resolveWith()实现成功回调函数队列调用

　　(7)、deferred.resolveWith()——使用指定的上下文和参数执行成功回调函数

　　(8)、deferred.reject()——通过调用deferred.rejectWith()实现失败回调函数队列调用

　　(9)、deferred.rejectWith()——使用指定的上下文和参数执行成功回调函数

　　(10)、deferred.pipe()——每次调用回调函数之前先调用传入的成功过滤函数或失败过滤函数，并将过滤函数的返回值作为回调函数的参数最终返回一个只读视图（调用promise实现）

　　(11)、deferred.promise()——返回deferred的只读视图

 (四)、$.when的实现

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

(五)、大家可能对ajax异步回调比较熟悉，那下面用ajax分析如何使用deferred对象。

(1) done/resolve

function cb() {

  alert('success')

}

var deferred = $.Deferred()

deferred.done(cb)

setTimeout(function() {

    deferred.resolve()

}, 3000)

这里使用setTimeout来模拟ajax请求（下同），在HTTP中表示后台返回成功状态（如200）时使用，执行deferred.resolve()，则会触发请求成功后的回调函数cb。

 

(2)、fail/reject

function cb() {

    alert('fail')

}

var deferred = $.Deferred()

deferred.fail(cb)

setTimeout(function() {

    deferred.reject()

}, 3000)

在HTTP中表示后台返回非成功状态时使用，执行deferred.resolve() ，触发请求失败后的回调函数alert(fail)。

(3)、progress/notify

function cb() {

    alert('progress')

}

var deferred = $.Deferred()

deferred.progress(cb)

setInterval(function() {

    deferred.notify()

}, 2000)

注意到没有，这里使用在setInterval来模拟，HTTP中表示请求过程中使用，请求过程中不断执行deferred.notify()，即不断执行回调函数。这可用在文件上传时的loading百分比或进度条。

(4)、便利函数then，一次添加成功，失败，进度回调函数

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 的实现。

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

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，表示成功。

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

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将不会被执行。

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

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