jquery 异步回调的写法 / deferred对象详解

本文 其实是搬运的 大神 阮一峰老师的文章 ，具体可见：http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

我只是自己抄了一遍加深自己的理解。

什么是deferred?

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

1. ajax请求的传统写法

$.ajax({
    url:'',
    type:'get',
    data:{},
    success:function(res){
        callBack();
    },
    error:function(){}
})

success 处理 请求成功，error处理 请求失败，但是无法进行链式调用。
$.ajax( ) 完成后，如果jquery 1.5版本以下，返回的是xhr对象，以上版本返回的是 deferred 对象，是可以进行链式操作的。

2.ajax的链式写法

$.ajax({
    url:'',
    type:'get',
    data:{}
})
.done( function( res ){ 
    alert( '成功'+res )
} )
.fail ( function( res ){
    alert( '失败'+res)
 } )

使用链式写法之后，代码的可读性也大大提高了

3.制定同一操作的多个回调函数

$.ajax({
    url:'',
    type:'get',
    data:{}
})
.done( function( res ){ 
    alert( '成功'+res )
} )
.fail ( function( res ){
    alert( '失败'+res)
 } )
 .done({
      alert('第二个回调函数')
})

回调函数可以添加任意多个，他们按顺序执行

4.为多个操作指定一个回调函数

$.when( $.ajax("test1.html"),$.ajax("test2.html"))
.done()
.fail()

这段代码的意思是，先执行 test1的操作和test2的操作，如果两个都执行成功则 调用done里面的回调函数，如果都没有成功或有一个没有成功则执行fail里面的函数

5.普通操作的回调函数接口（上）

deferred 对象的最大优点，就是把这一套 回调函数接口，从ajax扩展到了所有操作上，也就是说任何一个操作，不管是ajax操作还是本地操作，不管是同步操作还是异步操作都可以用 deferred制定回调函数。

代码实例

var wait= function (){
        var tasks = function(){
            alert('执行完毕')
        };
        setTimeout(tasks,3000)

    }

我们为他指定回调函数，会怎么做呢？

$.when( wait() )
.done(function(){ alert('成功')})
.fail(function(){ alert('失败')})

但是这样写的话，done方法会立即执行，起不到回调函数的作用，因为$.when 的参数只能是 deferred对象，所以只能对 wait方法改写。

var dtd = $.Deferred()    //新建一个 deferred对象
var wait= function( dtd ){
    var tasks = function(){
        alert('执行完毕');
        dtd.resolve()  // 改变deferred对象的执行状态
    }

    setTimeout(tasks ,3000 );
    return dtd;
}

现在 wait函数返回的是deferred 对象，这样就可以加上链式操作了

$.when( wait(dtd) )
.done(function(){ alert('成功')})
.fail(function(){ alert('失败')})

wait 函数执行完，就会自动运行done方法指定的操作了。

6. deferred.resolve( )与deferred.reject( )

deferred对象 有三种执行状态，未完成，已完成和待执行
deferred对象 resolved状态 表示执行状态是已完成，会即刻执行done( )操作
deferred对象 rejected 表示执行状态是失败，会即刻执行fail( )操作
如果执行状态是未完成，则会继续等待或者还可以调用 progress( )

所以 有两个方法
deferred.resolve( )
deferred.reject( )

7.deferred对象的 promise( ) 方法