Deferred对象：
一、什么是deferred对象？
开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。
通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。
但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。
简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。
它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口。它的主要功能，可以归结为四点。下面我们通过示例代码，一步步来学习。
二、ajax操作的链式写法
首先，回顾一下jQuery的ajax操作的传统写法
1 $.ajax({
2 url: "test.html",
3 success: function(){
4 alert("哈哈，成功了！");
5 },
6 error:function(){
7 alert("出错啦！");
8 }
9 });
上面的代码中，$.ajax()接受一个对象参数，这个对象包含两个方法：success方法指定操作成功后的回调函数，error方法指定操作失败后的回调函数。
$.ajax()操作完成后，如果使用的是低于1.5.0版本的jQuery，返回的是XHR对象，你没法进行链式操作；如果高于1.5.0版本，返回的是deferred对象，可以进行链式操作。
现在，新的写法是这样的:
1 $.ajax("test.html")
2 .done(function(){ alert("哈哈，成功了！"); })
3 .fail(function(){ alert("出错啦！"); });
可以看到，done()相当于success方法，fail()相当于error方法。采用链式写法以后，代码的可读性大大提高。
三、指定同一操作的多个回调函数
deferred对象的一大好处，就是它允许你自由添加多个回调函数。
还是以上面的代码为例，如果ajax操作成功后，除了原来的回调函数，我还想再运行一个回调函数，怎么办？
很简单，直接把它加在后面就行了。
$.ajax("test.html")
.done(function(){ alert("哈哈，成功了！");} )
.fail(function(){ alert("出错啦！"); } )
.done(function(){ alert("第二个回调函数！");} );
（运行代码示例3）
回调函数可以添加任意多个，它们按照添加顺序执行。
四、为多个操作指定回调函数
deferred对象的另一大好处，就是它允许你为多个事件指定一个回调函数，这是传统写法做不到的。
请看下面的代码，它用到了一个新的方法$.when():
1 $.when($.ajax("test1.html"), $.ajax("test2.html"))
2 .done(function(){ alert("哈哈，成功了！"); })
3 .fail(function(){ alert("出错啦！"); });
这段代码的意思是，先执行两个操作$.ajax("test1.html")和$.ajax("test2.html")，如果都成功了，就运行done()指定的回调函数；如果有一个失败或都失败了，就执行fail()指定的回调函数。
五、普通操作的回调函数接口（上）
deferred对象的最大优点，就是它把这一套回调函数接口，从ajax操作扩展到了所有操作。也就是说，任何一个操作----不管是ajax操作还是本地操作，也不管是异步操作还是同步操作----都可以使用deferred对象的各种方法，指定回调函数。
我们来看一个具体的例子。假定有一个很耗时的操作wait:
1 var wait = function(){
2 var tasks = function(){
3 alert("执行完毕！");
4 };
5 setTimeout(tasks,5000);
6 };
我们为它指定回调函数，应该怎么做呢？
很自然的，你会想到，可以使用$.when():
1 $.when(wait())
2 .done(function(){ alert("哈哈，成功了！"); })
3 .fail(function(){ alert("出错啦！"); });
但是，这样写的话，done()方法会立即执行，起不到回调函数的作用。原因在于$.when()的参数只能是deferred对象，所以必须对wait()进行改写:
1 var dtd = $.Deferred(); // 新建一个deferred对象
2 var wait = function(dtd){
3
4 var tasks = function(){
5 alert("执行完毕！");
6 dtd.resolve(); // 改变deferred对象的执行状态
7 };
8
9 setTimeout(tasks,5000);
10 return dtd;
11 };
现在，wait()函数返回的是deferred对象，这就可以加上链式操作了。
1 $.when(wait(dtd))
2 .done(function(){ alert("哈哈，成功了！"); })
3 .fail(function(){ alert("出错啦！"); });
wait()函数运行完，就会自动运行done()方法指定的回调函数。
六、deferred.resolve()方法和deferred.reject()方法
如果仔细看，你会发现在上面的wait()函数中，还有一个地方我没讲解。那就是dtd.resolve()的作用是什么？
要说清楚这个问题，就要引入一个新概念"执行状态"。jQuery规定，deferred对象有三种执行状态----未完成，已完成和已失败。如果执行状态是"已完成"（resolved）,deferred对象立刻调用done()方法指定的回调函数；如果执行状态是"已失败"，调用fail()方法指定的回调函数；如果执行状态是"未完成"，则继续等待，或者调用progress()方法指定的回调函数（jQuery1.7版本添加）。
前面部分的ajax操作时，deferred对象会根据返回结果，自动改变自身的执行状态；但是，在wait()函数中，这个执行状态必须由程序员手动指定。dtd.resolve()的意思是，将dtd对象的执行状态从"未完成"改为"已完成"，从而触发done()方法。
类似的，还存在一个deferred.reject()方法，作用是将dtd对象的执行状态从"未完成"改为"已失败"，从而触发fail()方法
1 var dtd = $.Deferred(); // 新建一个Deferred对象
2 var wait = function(dtd){
3
4 var tasks = function(){
5 alert("执行完毕！");
6 dtd.reject(); // 改变Deferred对象的执行状态
7 };
8
9 setTimeout(tasks,5000);
10 return dtd;
11 };
12
13 $.when(wait(dtd))
14 .done(function(){ alert("哈哈，成功了！"); })
15 .fail(function(){ alert("出错啦！"); });
七、deferred.promise()方法
上面这种写法，还是有问题。那就是dtd是一个全局对象，所以它的执行状态可以从外部改变。
请看下面的代码:
1 var dtd = $.Deferred(); // 新建一个Deferred对象
2 var wait = function(dtd){
3
4 var tasks = function(){
5 alert("执行完毕！");
6 dtd.resolve(); // 改变Deferred对象的执行状态
7 };
8 setTimeout(tasks,5000);
9 return dtd;
10 };
11
12 $.when(wait(dtd))
13 .done(function(){ alert("哈哈，成功了！"); })
14 .fail(function(){ alert("出错啦！"); });
15
16 dtd.resolve();
我在代码的尾部加了一行dtd.resolve()，这就改变了dtd对象的执行状态，因此导致done()方法立刻执行，跳出"哈哈，成功了！"的提示框，等5秒之后再跳出"执行完毕！"的提示框。
为了避免这种情况，jQuery提供了deferred.promise()方法。它的作用是，在原来的deferred对象上返回另一个deferred对象，后者只开放与改变执行状态无关的方法（比如done()方法和fail()方法），屏蔽与改变执行状态有关的方法（比如resolve()方法和reject()方法），从而使得执行状态不能被改变。
请看下面的代码:
1 var dtd = $.Deferred(); // 新建一个Deferred对象
2 var wait = function(dtd){
3 var tasks = function(){
4 alert("执行完毕！");
5 dtd.resolve(); // 改变Deferred对象的执行状态
6 };
7
8 setTimeout(tasks,5000);
9 return dtd.promise(); // 返回promise对象
10 };
11
12 var d = wait(dtd); // 新建一个d对象，改为对这个对象进行操作
13 $.when(d)
14 .done(function(){ alert("哈哈，成功了！"); })
15 .fail(function(){ alert("出错啦！"); });
16
17 d.resolve(); // 此时，这个语句是无效的
在上面的这段代码中，wait()函数返回的是promise对象。然后，我们把回调函数绑定在这个对象上面，而不是原来的deferred对象上面。这样的好处是，无法改变这个对象的执行状态，要想改变执行状态，只能操作原来的deferred对象。
不过，更好的写法是allenm所指出的，将dtd对象变成wait(）函数的内部对象.
1 var wait = function(dtd){
2 var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象
3 var tasks = function(){
4 alert("执行完毕！");
5 dtd.resolve(); // 改变Deferred对象的执行状态
6 };
7
8 setTimeout(tasks,5000);
9 return dtd.promise(); // 返回promise对象
10 };
11
12 $.when(wait())
13 .done(function(){ alert("哈哈，成功了！"); })
14 .fail(function(){ alert("出错啦！"); });
八、普通操作的回调函数接口（中）
另一种防止执行状态被外部改变的方法，是使用deferred对象的建构函数$.Deferred()。
这时，wait函数还是保持不变，我们直接把它传入$.Deferred():
1 $.Deferred(wait)
2 .done(function(){ alert("哈哈，成功了！"); })
3 .fail(function(){ alert("出错啦！"); });
jQuery规定，$.Deferred()可以接受一个函数名（注意，是函数名）作为参数，$.Deferred()所生成的deferred对象将作为这个函数的默认参数。
九、普通操作的回调函数接口（下）
除了上面两种方法以外，我们还可以直接在wait对象上部署deferred接口.
1 var dtd = $.Deferred(); // 生成Deferred对象
2 var wait = function(dtd){
3 var tasks = function(){
4 alert("执行完毕！");
5 dtd.resolve(); // 改变Deferred对象的执行状态
6 };
7
8 setTimeout(tasks,5000);
9 };
10
11 dtd.promise(wait);
12
13 wait.done(function(){ alert("哈哈，成功了！"); })
14 .fail(function(){ alert("出错啦！"); });
15 wait(dtd);
这里的关键是dtd.promise(wait)这一行，它的作用就是在wait对象上部署Deferred接口。正是因为有了这一行，后面才能直接在wait上面调用done()和fail()。
十、小结：deferred对象的方法
前面已经讲到了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对象还有二个重要方法，上面的教程中没有涉及到。
有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。
1 $.when($.ajax( "/main.php" ))
2 .then(successFunc, failureFunc );
如果then()有两个参数，那么第一个参数是done()方法的回调函数，第二个参数是fail()方法的回调方法。如果then()只有一个参数，那么等同于done()。
这个方法也是用来指定回调函数的，它的作用是，不管调用的是deferred.resolve()还是deferred.reject()，最后总是执行。
1 $.ajax( "test.html" )
2 .always( function() { alert("已执行！");} );
以下是jQuery的源码分析：
1 //1>>ajax操作的链式写法 $.ajax("test.html").done(function(){ alert("哈哈，成功了！"); }).fail(function(){ alert("出错啦！"); });
2 //2>>指定同一操作的多个回调函数: $.ajax("test.html").done(function(){ alert("哈哈，成功了！"); }).fail(function(){ alert("出错啦！"); }).done(function(){ alert("第二个回调函数！"); });
3 //3>>为多个操作指定回调函数： $.when($.ajax("test1.html"), $.ajax("test2.html")).done(function(){ alert("哈哈，成功了！"); }).fail(function(){ alert("出错啦！"); });
4 var promiseMethods = "done fail isResolved isRejected promise then always pipe".split( " " ),
5 //静态引用slice方法
6 sliceDeferred = [].slice;
7 /*（1）$.Deferred()生成一个deferred对象。
8 （2）deferred.done()指定操作成功时的回调函数
9 （3）deferred.fail()指定操作失败时的回调函数
10 （4）deferred.promise()没有参数时，作用为保持deferred对象的运行状态不变；接受参数时，作用为在参数对象上部署deferred接口。
11 （5）deferred.resolve()手动改变deferred对象的运行状态为"已完成"，从而立即触发done()方法。
12 （6）$.when()为多个操作指定回调函数。除了这些方法以外，deferred对象还有三个重要方法，上面的教程中没有涉及到。
13 （7）deferred.then()有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。
14 $.when($.ajax( "/main.php" )).then(successFunc, failureFunc );
15 如果then()有两个参数，那么第一个参数是done()方法的回调函数，第二个参数是fail()方法的回调方法。如果then()只有一个参数，那么等同于done()。
16 （8）deferred.reject()这个方法与deferred.resolve()正好相反，调用后将deferred对象的运行状态变为"已失败"，从而立即触发fail()方法。
17 （9）deferred.always()这个方法也是用来指定回调函数的，它的作用是，不管调用的是deferred.resolve()还是deferred.reject()，最后总是执行。
18 $.ajax( "test.html" )
19 .always( function() { alert("已执行！");} );
20 */
21 jQuery.extend({
22 _Deferred: function() {
23 var callbacks = [],//回调函数数组
24
25 //存储上下文 与参数 同时还可以表示是否执行完成（fired非空即已完成）
26 //已完成指：回调函数队列中的函数执行完成 还可以添加done添加回调函数，添加时fired会被置0
27 fired,//stored[context,args]
28 firing,//如果已经触发 正在执行，避免再次触发
29 cancelled,//标识异步队列是否取消，取消后忽略done resolve resolveWith的调用
30 deferred = {
31 // done( f1, f2, ...)增加成功回调函数，状态为resolved时立即调用
32 //把要依次处理的函数(arguments)[可以是函数列表,也可以是函数数组]加入到队列表(callbacks)中,,返回 deferred 对象
33 done: function() {
34 //如果状态为取消
35 if(!cancelled){
36 var args = arguments,//回调函数数组
37 i,//遍历变量
38 length,//回调函数数组长度
39 elem,//单个回调函数
40 type,//elem类型
41 _fired;//临时备份_fired
42 if(fired){//如果已执行完成（fired中有上下文和参数） 可以调用resolveWith了 此时fired =0 将值赋给_fired
43 _fired = fired;
44 fired = 0;
45 }
46 //添加 args = arguments 中的函数到回调函数数组
47 for(i = 0,length = args.length;i<length;i++){
48 elem = args[i];
49 type = jQuery.type(elem);
50 //如果是数组，递归调用
51 if(type === "array"){
52 //强制上下文为deferred 元素时数组时 将元素的元素加入到callbacks中间
53 deferred.done.apply(deferred,elem);
54 }else if(type === "function"){
55 callbacks.push(elem);//放入到回调函数数组中间
56 }
57 }
58 // 如果已执行（_fired表示Deferred的状态是确定的），则立即执行新添加的函数
59 // 使用之前指定的上下文context和参数args
60 if(_fired){//_fired不为空
61 //如果这个延迟对象已触发，立即调用resolveWith方法
62 deferred.resolveWith(_fired[0],_fired[1]);
63 }
64 }
65 return this;
66 },
67 //执行，使用指定的上下文和参数
68 resolveWith: function( context, args ) {
69 //符合：没有取消 没有正在执行 没有执行完成 才能继续执行
70 if(!cancelled && !fired && !firing){
71 //确保args可用
72 args = args || [];
73 //执行过程中将firing改为1 避免提前执行
74 firing = 1;
75 try{
76 //循环执行回调函数队列，不错的写法
77 while(callbacks[0]){
78 //使用指定的context 不是this
79 //执行回调函数 使用指定的上下文 shift():删除并执行第一个元素
80 callbacks.shift().apply(context,args);
81 }
82 }finally{
83 fired = [context,args];
84 firing = 0;
85 }
86 }
87 return this;
88 },
89 //把状态设置为resolved 可以理解为执行回调函数
90 //动改变deferred对象的运行状态为"已完成"，从而立即触发done()方法。
91 resolve: function() {
92 //当resolve后，以后done（）进来的函数都会立即执行，这个在$(function(){});运用的非常好！这里$(function(){})=
93 // $(document).ready(function(){})原因可以在init实例化的函数中看到
94 //if (jQuery.isFunction(selector)) {return rootjQuery.ready(selector)};
95 deferred.resolveWith(this,arguments);
96 return this;
97 },
98 isResolved: function() {
99 //运行中 或已运行完成 (fired)不为空/0
100 return !!(firing || fired);
101 },
102 //取消异步队列 设置标识位，清空函数队列
103 cancel: function() {
104 cancelled =1;//已取消
105 callbacks = [];//清空回调函数
106 return this;
107 }
108 };
109 return deferred;
110 },
111 /*这个$.Deferred()才是给我们使用的，然后根据私有的_Deferred对象扩展出fail，reject等等，
112 这个其实跟done,resolve是同理的，所有作者这里进行了代码公用 */
113 //创建一个异步队列： 初始化（unresolved） 成功：resolved 失败 rejected
114 //执行那些回调函数依赖状态 变为resolved 和 rejected 后就不变了
115 Deferred: function( func ) {
116 //_Deferred无成功和失败状态 ： 初始化 执行中 执行完毕 已取消
117 //建立两个私有的延迟对象，用failDeferred去替代fail rejectWith reject
118 var deferred = jQuery._Deferred(),
119 failDeferred = jQuery._Deferred(),
120 promise;
121 // Add errorDeferred methods, then and promise 增加错误延迟队列方法：then() promise()
122 jQuery.extend( deferred, {
123 //增加成功和失败回调函数到个字的队列中
124 //两个参数可以是数组或null
125 //状态为resolved时立即调用成功回调 状态为rejected时立即调用失败回调
126 //有时为了省事，可以把done()和fail()合在一起写
127 then: function( doneCallbacks, failCallbacks ) {
128 //done向deferred添加回调函数doneCallbacks fail向failDeferred添加回调函数failCallbacks 折行表达式返回failCallbacks
129 deferred.done(doneCallbacks).fail(failcallbacks);
130 //强制返回deferred
131 return this;
132 },
133 //注册一个callback函数无论成功 失败都调用
134 always: function() {
135 // done的上下文设置为deferred，fail的上下文设置为this
136 // done和fail的上下文不一致吗？一致！在这里this等于deferred
137 // 但是这里如此设置上下文应该该如何解释呢？与then的实现有什么不一样呢？
138 // fail指向failDeferred.done，默认上下文是failDeferred，failDeferred的回调函数数组callbacks是通过闭包引用的，
139 // 这里虽然将failDeferred.done方法的上下文设置为deferred，但是不影响failDeferred.done的执行，
140 // 在failDeferred.done的最后将this替换为deferred，实现链式调用，
141 // 即调用过程中没有丢失上下文this，可以继续链式调用其他的方法而不会导致this混
142 // 从语法上，always要达到的效果与then要达到的效果一致
143 // 因此，这行代码可以改写为两行（类似then的实现方式）,效果是等价的：deferred.done(failDeferred.cancel).fail(deferred.cancel);
144 return deferred.done.apply(deferred,arguemnts).fail.apply(this,arguments);
145 },
146 //失败回调函数
147 fail: failDeferred.done,
148 //使用指定上下文和参数执行失败回调函数队列
149 rejectWith: failDeferred.resolveWith,
150 //调用失败回调函数队列
151 //调用后将deferred对象的运行状态变为"已失败"，从而立即触发fail()方法。
152 reject: failDeferred.resolve,
153 //判断状态是否成功
154 isRejected: failDeferred.isResolved,
155 // 每次调用回调函数之前先调用传入的成功过滤函数或失败过滤函数，并将过滤函数的返回值作为回调函数的参数
156 // 最终返回一个只读视图（调用promise实现）
157 // fnDone在状态是否为成功（resolved）时被调用
158 // fnFail在状态是否为失败（rejected）时被调用
159 pipe: function( fnDone, fnFail ) {
160
161 },
162 //没有参数时，作用为保持deferred对象的运行状态不变；接受参数时，作用为在参数对象上部署deferred接口。
163 //返回一个包含 done fail isResolved isRejected promise then always pipe的deferred对象，不让外部修改状态，只能读状态
164 promise: function( obj ) {
165 if(obj == null){
166 //只会执行一次promise，第一次执行的结果被存储在promise变量中
167 if(promise){
168 return promise;
169 }
170 promise = obj = {};
171 }
172 var i = promiseMethods.length;
173 while(i--){
174 //这里的i--是和0 比较 不用和promoiseMethods.length比较 可以减少计算
175 obj[promiseMethods[i]] = deferred[promiseMethods[i]];
176 }
177 return obj;
178 },
179 // 成功队列执行完成后，会执行失败带列的取消方法
180 // 失败队列执行完成后，会执行成功队列的取消方法
181 // 确保只有一个函数队列会被执行，即要么执行成功队列，要么执行失败队列；
182 // 即状态只能是或成功、或失败，无交叉调用
183 // deferred和failDeferred的canceled属性，只能通过闭包引用，因此不用担心状态、上下文的混乱
184 deferred.done(failDeferred.cancel).fail(deferred.cancel);
185 //隐藏cancel接口，防止外部调用
186 delete deferred.cancel;
187 //执行传入的func 如果没有函数进来就立即执行 传入deferred对象，调用回调函数
188 if(func){
189 func.call(deferred,deferred);
190 }
191 return deferred;
192 });
193
194 },
195 /* 异步队列工具函数 firstParam：一个活多个Deferred对象或JavaScript对象*/
196 //为多个操作指定回调函数。
197 when: function( firstParam ) {
198 var args = arguments,
199 i = 0,
200 length = args.length,
201 count = length,
202 //如果参数长度等于1 并且存在promise函数 表明是一个deferred对象，
203 deferred = length <=1 && firstParam && jQuery.isFunction(firstParam.promise) ?
204 firstParam :
205 jQuery.Deferred();//新建
206 //成功回调函数（resolve）
207 function resolveFunc(i){
208 return function(value){
209 //如果传入的参数大于一个，则传入的参数转换成真正的数组 silceDeferred = [].silce
210 args[i] = arguments.length > 1 ? sliceDeferred.call(argguments,0) : value;
211 if(!(--count)){
212 //resolve deferred 响应这个deferred对象
213 deferred.resolveWith(deferred,sliceDeferred.call(args,0));
214 }
215 };
216 }
217
218 if (length > 1) {
219 for (; i < length; i++) {
220 //存在agrs[i]并且是args[i]是deferred对象，那这样的话作者怎么不直接jQuery.isFunction(args[i].promise)，感觉多判断了，作者也蒙了吧
221 if (args[i] && jQuery.isFunction(args[i].promise)) {
222 //执行一次resolveFunc(i)count就减少一个
223 args[i].promise().then(resolveFunc(i), deferred.reject);
224 } else {
225 // 计数器，表示发现不是Deferred对象，而是普通JavaScript象 ,反正最后只要count==0才能resovle deferred
226 --count;
227 }
228 }
229 if (!count) {
230 deferred.resolveWith(deferred, args);
231 }
232 } else if (deferred !== firstParam) { //如果只传了一个参数，而这个参数又不是deferred对象，则立即resolve
233 deferred.resolveWith(deferred, length ? [firstParam] : []);
234 }
235 return deferred.promise(); //返回deferred只读视图
236 }
237 });
