出处：你所必需控制的三种异步编程要领callbacks,listeners,promise
媒介
coder都晓得，javascript言语运转环境是单线程的，这意味着任何两行代码都不能同时运转。多使命同时举行时，实质上形成了一个行列，当行列中前一个事宜结束时，才实行下一个事宜。 如果行列中任何一个事件费时太长，则会形成浏览器假死，壅塞其他事件一般举行，影响用户体验。
js中将使命实行分为同步形式和异步形式，上面一种即为同步形式，任何比较花时刻的代码最好设想成异步形式。经由过程异步编程体式格局，即能够到达伪多历程。罕见的异步形式主要有callbaks，listeners（一种观察者形式），promise，下面我将会细致描述三者各自的好坏。
Callbacks
这是再罕见不过的异步编程体式格局了，任何前端都写过如许的代码吧：
function callback(){
console.log('do callbacks');
};
setTimeout(callback,300);
经由过程这类体式格局，你能够简朴的完成异步编程。这里须要注重，这里的300ms只是抱负时刻，实际中各浏览器略有差别，主要取决于线程中其他使命所用的时刻。这个不细致议论，个中还触及requestAnimationFrame等。本身能够google。
此要领瑕玷是什么想必我不说你也晓得,如：
function fn1(f){
alert(1);
f();
};
function fn2(f){
alert(2);
f();
};
function fn3(){
alert(3);
};
fn1(function(){ fn2(fn3); });
如果逻辑在庞杂一点呢？恐惧看代码的人会一头雾水吧。而promise则能够把这类庞杂的嵌套写的一看就邃晓，下面会讲到。
Listeners
这也是一种罕见的异步编程体式格局，如：
$elem.on('click',doClick);
function doClick(){
//do something
};
设想形式中将这类体式格局称之为敕令形式。这类体式格局的优点是你能够注册多个事宜，待事宜触发时挪用注册的函数。
固然这里不仅仅是这类简朴的监听体式格局，我须要将的是一种更笼统的异步编程体式格局——listeners。经由过程观察者形式，我们用一个数组来保留事宜称号以及事宜绑定的函数要领，当须要触发该事宜时，我们从数组中掏出之前的注册的函数。而EventProxy就是这类体式格局完成的，经由过程on，all注册，emit触发。如：
var ep = EventProxy.create("template", "data", "l10n", function (template, data, l10n) {
_.template(template, data, l10n);
});
$.get("template", function (template) {
// something
ep.emit("template", template);
});
$.get("data", function (data) {
// something
ep.emit("data", data);
});
$.get("l10n", function (l10n) {
// something
ep.emit("l10n", l10n);
});
下面我用本身的代码简朴的完成这类体式格局
var Observer = {
_callbacks:{},
register:function(name,fn,context){
if(!name){
return;
}
fn = fn || function(){};
if(!Observer._callbacks[name]){
var list = Observer._callbacks[name] = [];
}
list.push({fn:fn,context:context});
},
trigger:function(name){
var lists = [];
if(!name){ //触发一切
for(var key in Observer._callbacks){
lists.concat(Observer._callbacks[key]);
}
}else{ //触发指定
lists = Observer._callbacks[name];
}
for(var i = 0,len =lists.length;i<len;i++){
var list = lists[i];
var _fn = list.fn;
return _fn.apply(list.context || this,[].slice.call(arguments,1));
}
}
};
Observer.register('fetch',function(param){},this);
$.ajax(url,function(res){ Observer.trigger(name,res); });
这类形式在于跨模块异步编程中显得尤为主要。细致的完成逻辑适才已讲过，就不细致睁开，看代码诠释即可。
Promise
末了一种要领盛大上台，也是如今议论最多的异步编程体式格局。
代码实际上是实际的归结总结并以别的一种体式格局展示，我们有时刻看不懂，是因为写代码体式格局跟实际有差别。如果代码逻辑这么写：
img1.callThisIfLoadedOrWhenLoaded(function() {
// 加载完成
}).orIfFailedCallThis(function() {
// 加载失利
});
// 以及……
whenAllTheseHaveLoaded([img1, img2]).callThis(function(){
// 悉数加载完成
}).orIfSomeFailedCallThis(function(){
// 一个或多个加载失利
});
我置信非程序员也能看懂吧。这就是我们要引见的Promise异步编程要领。现有一些插件库Q.js, when.js ,wind.js ,rsvp.js都是相似完成的，恪守一个通用的、标准化的范例：Promises/A+，jQuery 有个相似的要领叫 Deferred，但不兼容 Promises/A+ 范例，因而会有点小题目，运用需谨慎。jQuery 另有一个 Promise 范例，它实际上是 Deferred 的缩减版，所以也有一样题目。jQuery相干的后续我会分章节一一报告，这里不做睁开。
Promise异步编程总结起来就是完成了thenable，说的更直白的一点就是我跟你是好朋友，我能够有事须要你帮助，你随时刻着吧，有须要我会第一时刻关照你。你跟小王也是好哥们，并一样通知你须要他帮助，并第一时刻关照他。固然你关照他是在我关照你今后。用伪代码示意：
myself(function(){
callXiaoLi();
})
.then(function(){
//我是小李，你喊我了，我就去喊小王
callXiaowang();
})
.then(function(){ console.log('我是小王'); });
一样，下面我们会用简朴的代码完成以上逻辑。
/**
* author by 素人渔夫
* email:dengxiaoming1217@gmail.com
* description: 异步编程promise完成
*/
(function() {
/*
* promise
*/
function EasyPromise() {
this._callbacks = [];
};
EasyPromise.prototype = {
then: function(func, context) {
var p;
if (this._isdone) {
p = func.apply(context, this.result);
} else {
p = new EasyPromise();
this._callbacks.push(function() {
//此时apply context很主要，不然，res中的实例猎取不到this
var res = func.apply(context, arguments);
if (res && typeof res.then === 'function') {
res.then(p.resolve, p);
}else{
p.resolve(res);
};
});
}
return p;
},
resolve: function() {
this.result = arguments;
this._isdone = true;
for (var i = 0; i < this._callbacks.length; i++) {
this._callbacks[i].apply(this.result, arguments);
}
this._callbacks = [];
}
};
EasyPromise.when = function() {
var AllPromises = [].slice.call(arguments, 0)[0];
var p = new EasyPromise();
var promiseLen = AllPromises.length;
var doneParams = {};
AllPromises.forEach(function(item, index) {
item.__promise__name = index;
doneParams[index] = {};
item.then(checkAllPromiseDone, item);
});
var donePromiseCount = 0;
function checkAllPromiseDone(data) {
donePromiseCount++;
doneParams[this.__promise__name] = data;
if (donePromiseCount == promiseLen) {
doneParams = makeArray(doneParams);
p.resolve(doneParams);
}
};
return p;
};
if (typeof define !== 'undefined') {
define([], function() {
return EasyPromise;
});
} else if (typeof exports !== 'undefined') {
exports.EasyPromise = EasyPromise;
} else {
window.EasyPromise = EasyPromise;
}
})();
then完成比较绕，须要诠释一下,如：.then(xx).then()
每次.then时会天生一个新的promise对象， 就是说后一个then是注册给上一个promise对象的，其动身前提依靠于上一个.then时天生的promise。
如果上一个.then 末了返回效果黑白promise对象（即没有then要领），则直接 resolve
如果上一个.then末了返回的效果是promise对象，那.then天生的promise必需依靠返回效果中的promise，及内层的 promise.then( “.then时天生的promise”.resolve)
能够我这么诠释照样没能诠释很清晰，本身去明白吧。
别的，谷歌浏览器已完成了Promise API。我运用的式chrome 版本 31.0.1650.63。不可你能够在控制台输入以下代码测试：
var p = new Promise(function(resolve,reject){
setTimeout(resolve,100);
setTimeout(reject,300);
});
p.then(function(){
alert('resolve');
},function(){
alert('reject');
});
好了，异步编程的体式格局就讲这么多，我这里只不过是举一反三，并没有细致论述其api，而是以本身的代码简朴完成其原本。这些异步编程体式格局不仅仅限于浏览器环境，服务器环境如nodejs也可运用。比方EventProxy原本就是在nodejs中生长而来的。
愿望经由过程我的简朴报告能给人人供应帮助。如果有错，请帮助指出，感谢。
参考：
1.http://www.html5rocks.com/en/tutorials/es6/promises/
2.http://sporto.github.io/blog/2012/12/09/callbacks-listeners-promises/
3.http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html
