jquery的Deferred对象

一、Deferred对象

对于不能马上得出结果的操作，比如ajax操作、animate动画等等，往往需要指定回调函数来进行后续工作，deferred就是jQuery针对回调函数的解决方案，所有操作都能用defferd对象指定回调函数

1、比如，让el元素依次进行动画（右移、左移、宽度缩小），下一个动画要等上一个执行完毕后才能执行，这样的嵌套让代码结构变得复杂，而且阅读上也困难。

el.animate({
    'left' : '500px' 
},1000,function(){
    // 回调一
    el.animate({
        'left' : '100px' 
    },1000,function(){
        // 回调二
        el.animate({
            'width' : "100px" 
        },1000,function(){/*回调...*/})
    })
})

2、ajax方法

在deferred对象没出来之前，也就是jQuery1.5版本之前，ajax操作完成后返回的是XHR对象，jQuery1.5版本之后，ajax方法返回的是deferred对象，可以进行链式操作。

jQuery1.5之前：

$.ajax({
    url : "./test.html",
    success : function(data){
        console.log(data);
    },
    error : function(){
        console.log('fail')
    }
})

新写法：

$.ajax("./test.html")
.done(function(data){console.log(data)})
.fail(function(){console.log('fail')});

可以指定多个回调函数：

$.ajax("./test.html")
.done(function(data){console.log(data)})
.fail(function(){console.log('fail')})
.done(function(){console.log("第二次回调函数")});

可以为多个操作指定回调函数：

$.when($.ajax("./test.html"),$.ajax("./js/test.json"))
.done(function(data){console.log(data)})  //请求都成功才能执行，返回的结果是数组
.fail(function(){console.log('fail')})    //有一个失败会执行
.done(function(){console.log("第二次回调函数")});

 二、常见用法

$.when().done().fail()链式调用和deferred对象的结合，$.when方法的参数必须为deferred对象，使用如下：

function wait(){
    var Def = $.Deferred(); //声明一个Deferred对象
    setTimeout(function(){
        console.log('执行完毕');
        Def.resolve();  //改变Deferred对象的执行状态
    },3000);
    return Def;
}
$.when(wait()) // $.when参数必须是Deferred对象，否则，done方法会立即执行，没有回调函数的作用
.done(function(){console.log('done')})
.fail(function(){console.log('fail')});

三、deferred对象方法

1、$.Deferred生成一个Deferred对象，Deferred对象的初始执行状态为“未完成”

2、deferred.resolve() 改变Deferred对象的执行状态为“已完成”，从而执行done方法指定的回调函数

3、deferred.reject()  改变Deferred对象的执行状态为“已失败”，从而执行fail方法指定的回调函数

4、deferred.promise() 

5、then方法 管道模式执行回调