雨枫技术教程网

前言：

什么叫做递延对象，生成一个递延对象只需调用jQuery.Deferred函数，deferred这个单词译为延期，推迟，即延迟的意思，那么在jQuery中

又是如何表达延迟的呢，从递延对象中的then方法或许能找到这种延迟的行为，本文重点解读递延对象中的then方法

设计思路：

在递延对象构造中，分别有三组回调对象，每一组回调对象都有与之对应的行为(action，add listener)，和状态(final state)，

这些行为都归纳为递延对象中的(触发回调，添加函数到回调列表中等)方法

jQuery.Deferred构造源码

Deferred构造源码除了then函数源码外，其他都非常简单，这里不做过多解读，后面将重点讨论then方法
 

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") ]  
            ],  
            state = "pending",  
            promise = {  
                state: function() {  
                    return state;  
                },  
                always: function() {  
                    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 ) {  
                            var action = tuple[ 0 ],  
                                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[ action + "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;  
 
            // Handle state  
            if ( stateString ) {  
                list.add(function() {  
                    // state = [ resolved | rejected ]  
                    state = stateString;  
 
                // [ reject_list | resolve_list ].disable; progress_list.lock  
                // 可以看看上篇中lock方法的各种场景调用  
                }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );  
            }  
 
            // deferred[ resolve | reject | notify ]  
            deferred[ tuple[0] ] = function() {  
                // 如果方法不被借用，那么回调中的this对象为promise，没有触发回调的方法  
                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 );  
 
        // Call given func if any  
        // 作用于then方法  
        if ( func ) {  
            func.call( deferred, deferred );  
        }  
 
        // All done!  
        return deferred;  
    }  
});