转自：https://www.cnblogs.com/tiancai/p/5817996.html
jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。
每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。
- 什么是deferred对象
在开发过程中，我们经常会遇到某些耗时很长的JavaScript操作，其中既有异步操作（比如ajax读取服务器数据），也有同步操作（比如遍历一个大型数组）。他们都不是能立即得到结果的。通常的做法是为他们指定回调函数（callback）。即事先规定，一旦运行结束，应该执行哪些函数。但是，jQuery在回调函数方面的功能非常弱，为了改变这一点，就产生了deferred对象。
简单说，deferred对象就是jQuery回调函数解决方案。deferred对象的意思是：延迟到某个点执行。它解决了如何处理耗时操作的问题，为那些操作提供了更好的控制，以及统一的编程接口。
- $.ajax()的链式写法
//$.ajax()传统写法 $.ajax({
url:"test.html",
success:function(){
alert("执行成功！！！");
}，
error：function(){
alert("执行失败！！！");
}
})； //在上面的代码中，$.ajax()接受一个对象参数，这个对象包含两个方法，success与error。
$.ajax()操作完成后，如果是低于1.5.0版本的jQuery，返回的是XHR对象，你没法进行链式操作；如果是高于1.5.0版本的jQuery，则返回的是deferred对象，可以进行链式操作。
现在，新的写法如下：
1 //$.ajax()链式写法
2 $.ajax("test.html")
3 .done(function(){ alert("成功了！！！"); }),
4 .fail(function(){ alert("失败了！！！"); });
5 //可以看到，done()相当于success方法，fail()相当于error方法。
- 指定同一操作的多个回调函数
deferred对象的一大好处就是他允许你添加多个回调函数，例如：
//$.ajax()链式写法，多个回调函数
$.ajax("test.html")
.done( function(){ alert("成功了！！！"); } )
.fail( function(){ alert("失败了！！！"); } )
done( function(){ alert("另一个回调函数") } )；
//如果执行成功，则首先弹出：“成功了！！！”，再弹出：“另一个回调函数”。回调函数可以添加任意多个，它们按照添加顺序执行。
- 为多个操作指定回调函数
deferred对象的另一大好处是：可以为多个操作指定同一个回调函数。
1 //为多个操作指定回调函数
2 $.when(
3 $.ajax("test1.html"),
4 $.ajax("test2.html")
5 )
6 .done( function(){ alert( "成功了！！！" )； } )
7 .fail( function(){ alert( "失败了！！！" )； } )；
8 //这段代码的意思是，先执行两个操作$.ajax("test1.html")和$.ajax("test2.html")，如果都成功了，就运行done()指定的回调函数； 9 //如果有一个失败或都失败了，就执行fail()指定的回调函数。
- 普通函数的回调函数
deferred对象的最大优点，就是他把一套回调函数的接口从ajax操作扩展到了所有操作。也就是说，任何一个操作，不管是ajax还是本地操作，不管是异步操作还是同步操作，都可以使用deferred对象的各种方法，指定回调函数。
//假如有一个非常耗时的方法wait()
var wait = function(){
var tasks = function (){
alert( " 方法执行完毕！！！ " );
};
setTimeout(tasks,5000);
};
怎样为上面的wait()指定回调函数呢？
想到了用$.when()：$.when(wait()).done( function(){ alert( "成功！！！" ); } )
.fail( function(){ alert(" 失败！！！ "); } )； //但是这样写的话，done()会立即执行，起不到回调函数的作用。 //原因在于wait()的参数必须是deferred对象，所以必须对wait()方法改写。
var dtd = $.Deferred();//创建一个deferred对象
var wait = function (dtd) {
var tasks = function(){
alert( " 方法执行完成！ " )；
dtd.resolve(); //改变deferred对象的执行状态
}
setTimeout(tasks,5000);
return dtd;
} //现在wait()返回的是deferred对象，就可以加上链式操作了。 $.when(wait(dtd))
.done( function(){ alert( "成功！！！" ); } )
.fail( function(){ alert(" 失败！！！ "); } )； //这样，wait()函数运行完就自动执行done回调函数了。
- deferred.resolve()和deferred.reject()方法
jQuery规定，deferred对象有三种执行状态：“未完成”，“已完成”，“已失败”。如果执行状态是已完成（resolve），那么deferred对象将立即调用done()指定的回调函数；如果执行状态是已失败（reject），那么deferred对象将立即调用fail()指定的回调函数；如果执行状态是未完成，则继续等待，或者调用progress()方法（jQuery1.7版本添加）指定的回调函数。
前面部分的ajax操作时，deferred对象会根据返回结果，自动改变自身的执行状态；但是在wait()函数中，这个执行状态必须要程序员手动指定。dtd.resolve()的意思是，将dtd的执行状态从“未完成”改为“已完成”，从而触发done()方法。同理，dtd.reject()的意思是，将dtd的执行状态从“未完成”改为“已失败”，从而触发fail()方法。
1 //deferred.resolve()与deferred.reject() 2 var dtd = $.Deferred(); 3 4 var wait = function (dtd){
5 var tasks = function(){
6 alert(" 执行完成！！！ ");
7 dtd.resolve(); 8 } 9 setTimeout(tasks,5000);
return dtd; 10 }; 11 12 $.when(wait(dtd))
13 .done( function(){ alert(" 成功！！ "); } )
14 .fail( function(){ alert(" 失败！！ "); } );
- deferred.promise()方法
上面的写法还存在问题，就是dtd是一个全局变量，所以他的执行状态可以从外部改变。例如：
//dtd为全局变量，所以上面写法存在问题，例如： var dtd = $.Deferred(); var wait = function (dtd){
var tasks = function(){
alert(" 执行完成");
dtd.resolve(); } setTimeout(tasks,5000);
return dtd; } $.when(wiat(dtd))
.done( function (){ alert("执行成功！！！"); } )
.fail( function (){ alert("执行失败！！！"); } );
dtd.resolve(); //因为在结尾处加上了dtd.resolve(),所以改变了deferred对象的执行状态，所以done()方法会立即执行。 //执行结果： //“执行成功！！！” 等待五秒后 “执行成功！！！” //为了避免上面的问题，jQuery提供了deferred.promise()方法。
//他的作用是，在原来deferred对象上返回另一个deferred对象，后者只开放与改变状态无关的方法（例如done()和fail()方法），
//屏蔽与改变有关的方法（例如resolve()和reject()方法），从而使得执行状态不能被改变。
//deferred.promise()方法 var dtd = $.Deferred(); var wait = function (dtd) {
var tasks = function (){
alert(" 执行完成！！！ ")
dtd.resolve(); } setTimeout(tasks,5000);
return dtd.promise(); } var d = wait(dtd); $.when(d)
.done( function (){ alert(“执行成功！”); } )
.fail( function (){ alert("执行失败！"); } );
d.reslve(); //语句无效
在上面的代码中，wait()函数返回的是promise对象，然后，我们把回调函数绑定在这个对象上面，而不是原来的deferred对象上面。这样做的好处是，无法改变这个对象的执行状态，想要改变执行状态，只能操作原来的deferred对象。不过，更好的写法是将deferred对象作为wait()方法的内部对象。
//将deferred对象作为wait()方法的内部对象。 var wait = function(){
vat dtd = $.Deferred();
var tasks = function(){
alert(" 执行完成！！！ "); } setTimeout(tasks,5000);
return dtd.promise(); } $.when(wait()) .done(function(){ alert(" 执行成功！ "); })
.fail(function(){ alert(" 执行失败！ "); });
另一种防止执行状态被外部方法改变的方法，是使用deferred对象的构建函数$.deferred();
//wait()方法不变。 $.Deferred(wait)
.done(function(){ alert("success!"); })
.fail(function(){ alert("fail"); });
jQuery规定，$.Deferred()可以接受一个函数名（注意，是函数名）作为参数，$.Deferred()所生成的deferred对象将作为这个函数的默认参数。
除了上面两种方法以外，我们还可以直接在wait对象上部署deferred接口。
var dtd = $.Deferred(); // 生成Deferred对象 var wait = function(dtd){ var tasks = function(){ alert("执行完毕！"); dtd.resolve(); // 改变Deferred对象的执行状态 }; setTimeout(tasks,5000); }; dtd.promise(wait); wait.done(function(){ alert("哈哈，成功了！"); }) .fail(function(){ alert("出错啦！"); }); wait(dtd);
这里的关键是dtd.promise(wait)这一行，它的作用就是在wait对象上部署Deferred接口。正是因为有了这一行，后面才能直接在wait上面调用done()和fail()。
