jQuery源码分析(九) 异步队列模块 Deferred 详解

来源：cnblogs　　作者：大沙漠　　时间：2019/10/12 9:18:59　　对本文有异议

deferred对象就是jQuery的回调函数解决方案，它解决了如何处理耗时操作的问题,比如一些Ajax操作，动画操作等。(P.s:紧跟上一节:https://www.cnblogs.com/greatdesert/p/11433365.html的内容)

异步队列有三种状态:待定(pending)、成功(resolved)和失败(rejected),初始时处于pending状态

我们可以使用jQuery.Deferred创建一个异步队列，返回一个对象，该对象含有如下操作:

　　done(fn/arr)           　　　　　　　　;添加成功回调函数，当异步队列处于成功状态时被调用,参数同:jQuery.Callbacks(flags).add(fn/arr)
　　fail(fn/arr)                   　　　　　　　 ;添加失败回调函数，参数同上
　　progress(fn/arr)               　　　　 ;添加消息回调函数，参数同上
　　then(donefn/arr,failfn/arr,profn/arr)   ;同时添加成功回调函数、失败回调函数和消息回调函数
　　always(fn/arr)               　　　　　　 ;添加回调函数到doneList和failList中，即保存两份引用，当异步队列处于成功或失败状态时被调用   ;参数可以是函数、函数列表
　　state()                   　　　　　　 ;返回异步队列的当前状态、返回pending、resolved或者rejected
　　promise(obj)                   　　　　　 ;如果设置了obj参数对象则为obj对象增加异步队列的方法并返回。如果未设置参数obj，则返回当前Deferred对象的只读副本

如果调用$.Diferred()创建一个异步队列，返回后的对象可以调用如下几个方法:

writer by:大沙漠 QQ:22969969

　　resolve(args)              　　　　　　 ;使用指定的参数调用所有的成功回调函数，异步队列进入成功状态，之后就无法再调用
　　reject(args)                   　　　　　 ;使用指定的参数调用所有的失败回调函数，异步队列进入失败状态
　　notify(args)                   　　　　 ;使用指定的参数调用所有的消息回调函数
　　resolveWith(context,args)           　 ;使用指定的上下文和参数调用所有的成功回调函数，异步队列进入成功状态
　　rejectWith(context,args)           　　 ;使用指定的上下文和参数调用所有的失败回调函数，异步队列进入失败状态
　　notifyWith(context,args)           　　 ;使用指定的上下文和参数调用所有的消息回调函数

是不是和上一节介绍的Callbacks的fire和fireWith很像，Defferred内部就是通过通过Callback()回调函数列表来实现的，例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.js"></script>
</head>
<body>
<script>
    function f1(x){console.log('f1 '+x);}
    function f2(x){console.log('f2 '+x);}
    function f3(x){console.log('f3 '+x);}
    var t = $.Deferred();                   //创建异步队列
    t.done(f1).fail(f2).progress(f3);       //添加成功回调函数、失败回调函数和消息列表回调函数。等同于t.then(f1,f2,f3); 
    t.notify('test');                       //触发所有消息函数列表，输出:f3 test
    t.resolve('done');                      //触发所有成功回调函数,输出:done
    t.reject('fail');                       //没有输出，触发成功回调函数后失败回调函数列表就会被禁用，反过来也如此
    t.progress(f1);                         //输出:f1 test。这是因为消息回调函数之前已经被调用过，保存了上下文和参数了，如果之前没有调用，这里就没有输出。
</script>
</body>
</html>

输出如下:

源码分析

异步队列内部的实现原理就是通过jQuery.Callbacks定义三个回调函数列表，分别存储成功、失败、消息回调函数，然后返回一个对象，在该对象上设置done、fail和progress，分别对应这三个回调函数列表的add方法，这样就实现分别添加不同状态的回调函数了

$.Deferred是通过jQuery.extend函数直接挂载到jQuery里的,结构如下:

jQuery.extend({
    Deferred: function( func ) {
        var doneList = jQuery.Callbacks( "once memory" ),            //成功回调函数列表
            failList = jQuery.Callbacks( "once memory" ),            //失败回调函数列表
            progressList = jQuery.Callbacks( "memory" ),             //消息回调函数列表　　;这三个回调函数列表就是存储我们添加的触发函数的
            state = "pending",                                       //初始状态:pending
            lists = {                                                //后面的方法会遍历变量list中的属性名来为异步队列添加方法deffred.resolve()、resolveWith()、reject()、rejectWith()、notify()和notifyWith()
                resolve: doneList,
                reject: failList,
                notify: progressList
            },
            promise = {                                                //异步队列的只读副本
                /*略*/
            },
            deferred = promise.promise({}),                                //异步队列
            key;
        for ( key in lists ) {                                            //添加触发成功、失败、消息回调函数的方法，执行后deferred对象就多了resolve()、resolveWith()、reject()、rejectWith()、notify()和notifyWith()方法。
            deferred[ key ] = lists[ key ].fire;
            deferred[ key + "With" ] = lists[ key ].fireWith;
        }
        // Handle state
        deferred.done( function() {                                        //添加三个成功回调函数，分别用于设置状态为成功(resolved)，禁用失败列表函数列表和锁定消息回调函数列表
            state = "resolved";
        }, failList.disable, progressList.lock ).fail( function() {        //添加三个失败回调韩素，分别用于设置状态为失败(rejected)，禁用成功列表函数列表和锁定消息回调函数列表
            state = "rejected";
        }, doneList.disable, progressList.lock );
        // Call given func if any
        if ( func ) {
            func.call( deferred, deferred );
        }
        // All done!
        return deferred;                                                //返回异步队列deffrred
    },
    //...
})

可以看到$.Deferred最后返回的是deferred这个布局变量，而deferred是promise.promise({})的返回值，我们来看看promise的实现方法:

promise = {                        //异步队列的只读副本
    done: doneList.add,                            //添加成功回调函数，引用对应的回调函数列表的callbacks.add(fn/arr)方法，下同
    fail: failList.add,                            //添加失败回调函数
    progress: progressList.add,                    //添加消息回调函数
    state: function() {                            //返回异步队列的当前状态:pending、resolved、rejected之一
        return state;
    },
    // Deprecated
    isResolved: doneList.fired,
    isRejected: failList.fired,
    then: function( doneCallbacks, failCallbacks, progressCallbacks ) {    //同时添加成功回调函数、失败回调函数和消息回调函数
        deferred.done( doneCallbacks ).fail( failCallbacks ).progress( progressCallbacks );
        return this;
    },
    always: function() {                                                //添加回调函数到doneList和failList中，即保存两份引用，当异步队列处于成功或失败状态时被调用
        deferred.done.apply( deferred, arguments ).fail.apply( deferred, arguments );
        return this;
    },
    pipe: function( fnDone, fnFail, fnProgress ) {                        //过滤当前异步队列的状态和参数，并返回一个新的异步队列的副本,一般用不到
        return jQuery.Deferred(function( newDefer ) {
            jQuery.each( {
                done: [ fnDone, "resolve" ],
                fail: [ fnFail, "reject" ],
                progress: [ fnProgress, "notify" ]
            }, function( handler, data ) {
                var fn = data[ 0 ],
                    action = data[ 1 ],
                    returned;
                if ( jQuery.isFunction( fn ) ) {
                    deferred[ handler ](function() {
                        returned = fn.apply( this, arguments );
                        if ( returned && jQuery.isFunction( returned.promise ) ) {
                            returned.promise().then( newDefer.resolve, newDefer.reject, newDefer.notify );
                        } else {
                            newDefer[ action + "With" ]( this === deferred ? newDefer : this, [ returned ] );
                        }
                    });
                } else {
                    deferred[ handler ]( newDefer[ action ] );
                }
            });
        }).promise();
    },
    // Get a promise for this deferred
    // If obj is provided, the promise aspect is added to the object
    promise: function( obj ) {                            //如果设置了obj参数对象则为obj对象增加异步队列的方法并返回。如果未设置参数obj，则返回当前Deferred对象的只读副本，
        if ( obj == null ) {                                //如果obj为空
            obj = promise;                                        //则返回promise对象(是上一层作用域链的promise对象)
        } else {
            for ( var key in promise ) {                    //否则遍历promise
                obj[ key ] = promise[ key ];                    //将promise的所有方法、属性保存到obj中
            }
        }
        return obj;                                            //最后返回obj
    }
},

$.Deferred就是对Callbacks回调函数列表的管理而已，产生了一个新的$.Defferred接口，内部添加了一个state表示异步队列的状态。

原文链接：http://www.cnblogs.com/greatdesert/p/11454359.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章