【jquery】对deferred对象的理解

一、什么是deferred对象？

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。

通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。

但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。

简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。

它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口。

二、jQuery Deferred用法小结：

（1） $.Deferred() 生成一个deferred对象。

（2） deferred.done() 指定操作成功时的回调函数

（3） deferred.fail() 指定操作失败时的回调函数

（4） deferred.promise() 没有参数时，返回一个新的deferred对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署deferred接口。

（5） deferred.resolve() 手动改变deferred对象的运行状态为"已完成"，从而立即触发done()方法。

（6）deferred.reject() 这个方法与deferred.resolve()正好相反，调用后将deferred对象的运行状态变为"已失败"，从而立即触发fail()方法。

（7） $.when() 为多个操作指定回调函数。

除了这些方法以外，deferred对象还有二个重要方法，上面的教程中没有涉及到。

（8）deferred.then()

有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。

$.when($.ajax( "/main.php" ))

.then(successFunc, failureFunc );

如果then()有两个参数，那么第一个参数是done()方法的回调函数，第二个参数是fail()方法的回调方法。如果then()只有一个参数，那么等同于done()。

（9）deferred.always()

这个方法也是用来指定回调函数的，它的作用是，不管调用的是deferred.resolve()还是deferred.reject()，最后总是执行。

$.ajax( "test.html" )

 　　.always( function() { alert("已执行！");} );

三、简单代码实现：

function Deferred(){
    this.state = 0;
    this.doneQueue = [];
    this.failQueue = [];
}

Deferred.prototype = {
    constructor : Deferred,
    promise : function(){
        return this;
    },
    done : function(callback){
        this.doneQueue.push(callback);
        if( this.state != 0 ){
            this._finish();
        }
        return this;
    },
    resolve : function(){
        this.state = 1;
        this.args = arguments;
        this._finish();        
    },
    reject : function(){
        this.state = 2;
        this.args = arguments;
        this._finish();        
    },    
    _finish : function(){
            var queue = [];
        if (this.state == 1)
            queue = this.doneQueue;
        else if (this.state == 2)
            queue = this.failQueue;
        for (var i = 0, len = queue.length; i < len; i++) {
            var cb = queue[i];
            cb.apply(this, this.args);
        }
        return this;
    }
};

demo:

function demo( callback ){
    var dtd = new Deferred();
    setTimeout(function(){
        dtd.resolve();
        callback();
    }, 1 * 1000);
    return dtd;
}

demo(function(){
    alert(22);
}).done(function(){
    alert(33);
});

参考：

jQuery中Deferred的实现原理 

jQuery的deferred对象详解