javascript的异步编程
为什么要使用异步编程？
JS是单线程语言，就简单性而言，把每一件事情（包括GUI事件和渲染）都放在一个线程里来处理是一个很好的程序模型，因为这样就无需再考虑线程同步这些复杂问题。然而从另一方面来看，它也暴露了实际开发中的一个严重问题，单线程环境看起来对用户请求响应迅速，但是当线程忙于处理其它事情时，就不能对用户的鼠标点击和键盘操作做出响应。因此提出了异步需求，以此来解放当前线程，可以处理其他业务，待回调请求数据返回再发起回来处理。
何谓异步？关于这个问题，司徒正美给出以下解释：
笼统地说，异步在javascript就是延时执行。严格来说，javascript中的异步编程能力都是由BOM与DOM提供的，如setTimeout，XMLHttpRequest，还有DOM的事件机制，还有HTML5新增加的webwork, postMessage，等等很多。这些东西都有一个共同的特点，就是拥有一个回调函数，实现控制反转。由于控制反转是更深奥的问题，这里不想展开。不过有点可以确认的，回调函数的存在打断了原来的执行流程，让它们自行在适当的时机出现并执行，这是个非常便捷的模式。对比主动式的轮询，你就知它多么节能。
相比在同步编程，代码基本上自上向下执行，在异步编程，处理异步请求或订阅返回结果的代码就要写到回调函数中，由于代码之间存在依赖，回调函数套回调函数的情况也司空见惯了，这种套嵌结构对以后的维护来说简直是地狱噩梦。由此引出另外一个我们不得不面对的问题，try...catch无法捕捉几毫秒之后发生的异常。另外，除了setTimeout外，异步编程基本上由事件机制承担的，它们的回调函数什么时候发生基本上都是未知数，可能由于后台发生系统级错误，无法再发出响应，或者，系统忙碌，一时半刻响应不过来，这两种情况我们也必需提供一个策略，中断这操作，也就是所谓的abort，这些都是异步编程的所要处理的课题
Deferred对象是用来解决JS中的异步编程，它遵循 Common Promise/A 规范，在jQuery代码自身代码中有四处使用地方，分别是promise方法、DOM ready、ajax模块、动画模块。既然谈到 Common Promise/A 规范就先来了解下这个规范说了什么。
Promise（中文翻译：承诺）其实为一个有限状态机，共有三种状态：pending（执行中）、resolve（执行成功）和rejected（执行失败）。
其中pending为初始状态，resolve和rejected为结束状态（结束状态表示promise的生命周期已结束）。状态转换关系为：
pending->resolve，pending->rejected。
随着状态的转换将触发各种事件（如执行成功事件、执行失败事件等）。promise以未完成的状态开始，如果成功它将会是完成态，如果失败将会是失败态。当一个promise移动到完成态，所有注册到它的成功回调将被调用，而且会将成功的结果值传给它。另外，任何注册到promise的成功回调，将会在状态机切换到完成状态以后立即被调用。
来看下代码的实现：
Deferred: function( func ) {
var tuples = [//依赖了Calback回调队列管理。
// action, add listener, listener list, final state
[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
[ "notify", "progress", jQuery.Callbacks("memory") ]
],//tuples 创建三个$.Callbacks对象，分别表示成功，失败，处理中三种状态
state = "pending",
promise = {
state: function() {//state的get访问器：通过闭包访问状态机的状态，确保只能访问到Deferred对象的state，而无法修改state
return state;
},
always: function() {//无论最终状态为成功抑或是失败都会触发always，根据state执行deferred对象的成功回调或失败回调
deferred.done( arguments ).fail( arguments );
return this;
},
then: function( /* fnDone, fnFail, fnProgress */ ) {
var fns = arguments;
return jQuery.Deferred(function( newDefer ) {
jQuery.each( tuples, function( i, tuple ) {//逐一定义deferred对象成功、失败、执行中的处理函数执行之后的处理函数。
var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
// deferred[ done | fail | progress ] for forwarding actions to newDefer
deferred[ tuple[1] ](function() {
var returned = fn && fn.apply( this, arguments );
if ( returned && jQuery.isFunction( returned.promise ) ) {
returned.promise()
.done( newDefer.resolve )
.fail( newDefer.reject )
.progress( newDefer.notify );
} else {
newDefer[ tuple[ 0 ] + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
}
});
});
fns = null;
}).promise();
},
// Get a promise for this deferred
// If obj is provided, the promise aspect is added to the object
promise: function( obj ) {
return obj != null ? jQuery.extend( obj, promise ) : promise;
}
},
deferred = {}; // Keep pipe for back-compat
promise.pipe = promise.then; // Add list-specific methods
jQuery.each( tuples, function( i, tuple ) {//回调函数的存入
var list = tuple[ 2 ],
stateString = tuple[ 3 ]; // promise[ done | fail | progress ] = list.add
promise[ tuple[1] ] = list.add;//设计精妙，在状态机上挂载 done | fail | progress 方法，实际应用对应为Callback对象的add方法 // Handle state
if ( stateString ) {//如果存在最终状态：成功或失败都存在最终状态，处理中不存在undefined
list.add(function() {
// state = [ resolved | rejected ]
state = stateString; // [ reject_list | resolve_list ].disable; progress_list.lock
}, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );//给当前回调队列Callback增加三个回调函数，i^1为异或 成功则修改失败回调队列disable(不执行)，失败则修改成功回调队列disable不执行
} // deferred[ resolve | reject | notify ]
deferred[ tuple[0] ] = function() {//定义触发函数
deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );
return this;
};
deferred[ tuple[0] + "With" ] = list.fireWith;
}); // Make the deferred a promise
promise.promise( deferred );//扩展deferred，继承promise属性——即赋予deferred对象状态机属性 // Call given func if any
if ( func ) {
func.call( deferred, deferred );
} // All done!
return deferred;
}, // Deferred helper
when: function( subordinate /* , ..., subordinateN */ ) {
var i = 0,
resolveValues = slice.call( arguments ),
length = resolveValues.length, // the count of uncompleted subordinates
remaining = length !== 1 || ( subordinate && jQuery.isFunction( subordinate.promise ) ) ? length : 0, // the master Deferred. If resolveValues consist of only a single Deferred, just use that.
deferred = remaining === 1 ? subordinate : jQuery.Deferred(), // Update function for both resolve and progress values
updateFunc = function( i, contexts, values ) {
return function( value ) {
contexts[ i ] = this;
values[ i ] = arguments.length > 1 ? slice.call( arguments ) : value;
if ( values === progressValues ) {
deferred.notifyWith( contexts, values ); } else if ( !(--remaining) ) {
deferred.resolveWith( contexts, values );
}
};
}, progressValues, progressContexts, resolveContexts; // add listeners to Deferred subordinates; treat others as resolved
if ( length > 1 ) {
progressValues = new Array( length );
progressContexts = new Array( length );
resolveContexts = new Array( length );
for ( ; i < length; i++ ) {
if ( resolveValues[ i ] && jQuery.isFunction( resolveValues[ i ].promise ) ) {
resolveValues[ i ].promise()
.done( updateFunc( i, resolveContexts, resolveValues ) )
.fail( deferred.reject )
.progress( updateFunc( i, progressContexts, progressValues ) );
} else {
--remaining;
}
}
} // if we're not waiting on anything, resolve the master
if ( !remaining ) {
deferred.resolveWith( resolveContexts, resolveValues );
} return deferred.promise();
}
(一)、首先来理解下deferred功能：
1、异步队列是一个链式对象，增强对回调函数Callback的管理和调用，用于处理异步任务。
2、异步队列有三种状态：处理中（progress），成功（resolved），失败（rejected）。
3、执行哪些回调函数依赖于状态，状态变为成功（resolved）或失败（rejected）后，将保持不变。
4、回调函数的绑定可以是同步，也可以是异步的，即可以在任何时候绑定
(二)、$.Deferred的实现
1、首先代码中定义tuples数组：这个数组是干嘛的呢？
(1)、tuples[i][0]：定义deferred对象的触发回调函数列表执行(函数名)：deferred.resolve,deferred.reject,deferred.notify
(2)、tuples[i][1]：同上，定义添加回调函数的函数名：done、fail、progress
(3)、tuples[i][2]：这里依赖$.Callbacks对象，用它创建了三个$.Callbacks对象，分别管理成功，失败，处理中回调函数队列
(4)、tuples[i][3]：deferred最终状态（第三组数据除外）: 定义了成功最终状态(resolved),失败的最终状态(rejected)
2、创建了一个状态机promise对象，具有state、always、then、primise方法
(1)state：获取闭包属性state。默认pending；
(2)always：设置deferred对象成功和失败处理队列，根据state执行deferred对象的成功回调或失败回调
(3)then:
(4)promise:将赋予对象状态机特性（内部同过$.extend来扩展）,即新对象将拥有state、always、then、primise方法，即状态机的属性
3、jQuery.each遍历tuples：设置promise对象done,fail,progress属性引用Callback对象add方法，同时给deferred对象扩充6个方法
(1)resolve/reject/notify 类似 Callbacks.fire，调用对应**With，执行回调函数
(2)resolveWith/rejectWith/notifyWith 是 Callbacks.fireWith 队列方法引用
4、通过扩展primise对象生成最终的Deferred对象，返回该对象。如下图：
从上图可以清晰看出：deferred对象的state、always 、promise、then是从promise对象扩展而来的，其他方法pipe <==>then ，
done、fail、progress是对象三个Callback对象的回调add方法；——回调方法/事件订阅
reject、resolve、notify为触发相应执行回调队列的fire方法——通知方法/事件发布
rejectWith、resolveWith、notifyWith为执行相应回调队列的fireWidth方法——通知方法/事件发布
(三)、具体来分析deferred对象上的方法：
(1)、deferred.done()—— 订阅状态为成功（resolved）时回调函数，保存到对应的Callback对象
(2)、deferred.fail()—— 订阅状态为失败（rejected）时回调函数，保存到对应Callback对象
(3)、deferred.progress()——订阅状态为处理中（pending）时回调函数，保存到对应Callback对象
(4)、deferred.then()——增加成功回调函数和失败回调函数到各自的队列中；两个参数可以是数组或null，状态为成功（resolved）时立即调用成功回调函数，状态为失败（rejected）时立即调用失败回调函数
(5)、deferred.always()——增加回调函数，同时增加到成功队列和失败队列，状态已确定（无论成功或失败）时立即调用回调函数
(6)、deferred.resolve()——通过调用deferred.resolveWith()实现成功回调函数队列调用
(7)、deferred.resolveWith()——使用指定的上下文和参数执行成功回调函数
(8)、deferred.reject()——通过调用deferred.rejectWith()实现失败回调函数队列调用
(9)、deferred.rejectWith()——使用指定的上下文和参数执行成功回调函数
(10)、deferred.pipe()——每次调用回调函数之前先调用传入的成功过滤函数或失败过滤函数，并将过滤函数的返回值作为回调函数的参数最终返回一个只读视图（调用promise实现）
(11)、deferred.promise()——返回deferred的只读视图
(四)、$.when的实现
- 接受若干个对象，参数仅一个且非Deferred对象将立即执行回调函数
- Deferred对象和非Deferred对象混杂时，对于非Deferred对象remaining减1
- Deferred对象总数 = 内部构建的Deferred对象 + 所传参数中包含的Deferred对象
- 所传参数中所有Deferred对象每当resolve时remaining减1，直到为0时（所有都resolve）执行回调
(五)、大家可能对ajax异步回调比较熟悉，那下面用ajax分析如何使用deferred对象。
(1) done/resolve
function cb() {
alert('success')
}var deferred = $.Deferred()
deferred.done(cb)setTimeout(function() {
deferred.resolve()
}, 3000)(2)、fail/reject
function cb() {
alert('fail')
}var deferred = $.Deferred()
deferred.fail(cb)setTimeout(function() {
deferred.reject()
}, 3000)在HTTP中表示后台返回非成功状态时使用，执行deferred.resolve() ，触发请求失败后的回调函数alert(fail)。
(3)、progress/notify
function cb() {
alert('progress')
}var deferred = $.Deferred()
deferred.progress(cb)setInterval(function() {
deferred.notify()
}, 2000)注意到没有，这里使用在setInterval来模拟，HTTP中表示请求过程中使用，请求过程中不断执行deferred.notify()，即不断执行回调函数。这可用在文件上传时的loading百分比或进度条。
(4)、便利函数then，一次添加成功，失败，进度回调函数
function fn1() {
alert('success')
}
function fn2() {
alert('fail')
}
function fn3() {
alert('progress')
}
var deferred = $.Deferred()
deferred.then(fn1, fn2, fn3)
调用then后还可以继续链式调用then添加多个不同回调函数，这个then也正是jQuery对 Common Promise/A 的实现。
(5)、使用always方法为成功，失败状态添加同一个回调函数
var deferred = $.Deferred()
deferred.always(function() {
var state = deferred.state()
if ( state === 'resolved') {
alert('success')
} else if (state === 'rejected') {
alert('fail')
}
})
setTimeout(function() {
deferred.resolve()
//deferred.reject()
}, 3000)
回调函数中可以使用deferred.state方法获取异步过程中的最终状态，这里我调用的是deferred.resolve，因此最后的状态是resolved，表示成功。
(6)、when方法保证多个异步操作全部成功后才回调
function fn1() {
alert('done1')
}
function fn2() {
alert('done2')
}
function fn3() {
alert('all done')
}
var deferred1 = $.Deferred()
var deferred2 = $.Deferred()
deferred1.done(fn1)
deferred2.done(fn2)
$.when(deferred1, deferred2).done(fn3)
setTimeout(function() {
deferred1.resolve()
deferred2.resolve()
}, 3000)
先后弹出了done1、done2、all done。 如果setTimeout中有一个reject了，fn3将不会被执行。
(7)、如果多个请求完成后才算成功，1.5之前的是无法解决的，现在则可以用$.when搞定
var ajax1 = $.ajax(url1)
var ajax2 = $.ajax(url2)
$.when(ajax1, ajax2).done(success)