javascript 异步编程原理

Javascript 的执行环境是单线程的，所谓的单线程，就是指一次只能完成一件任务，如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。

这种模式的好处是实现起来比较简单，执行环境相对单纯。坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为一段 Js 代码长时间运行（比如死循环），导致整个页面卡在这个地方，其它任务无法执行。

为了解决这个问题，Javascript 语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

• “同步模式”如上文所描述的，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；

• “异步模式”则完全不同，每一个任务有一个或多个回调函数，前一个任务结束后不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

“异步模式”非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是 Ajax 操作。在服务器端，“异步模式”甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有 http 请求，服务器性能会急剧下降，很快就会失去响应。

setTimeout 神器

• 弊端1：setTimeout 和 setInterval 运行的最短周期是 5ms 左右，HTML规范 (opens new window)

var d = new Date(), count = 0, timer;
timer = setTimeout(function(){
    if( new Date() - d > 1000){
        clearTimeout(timer);
        console.log(count);
    }
    count++;
}, 0);

setTimeout 是存在一定时间间隔的，不是设定 n 毫秒执行，它就是 n 毫秒执行，可能会有一点时间延迟（2ms 左右）

• 弊端2：while 循环阻塞 setTimeout 执行

var d = new Date();
setTimeout(function(){
    console.log('show me after 1s, but you konw: ' + ( new Date() -d  ));
}, 1000);
while(true) if( new Date() - d > 2000 ) break;

上面代码，我们期望 console 在 1s 后打出结果，可事实却是在 2000ms+ 之后运行的，这就是 Javascript 单线程给我们带来的烦恼，while 循环阻塞了 setTimeout 的执行。

• 弊端3：try...catch... 捕捉不到它的错误

try {
    setTimeout(function() {
        throw new Error('我不希望这个错误出现');
    }, 1000);
}
catch(e) {
    console.log(e.message);
}

setTimeout 是异步编程不可缺少的角色，但它本身存在诸多问题，这就要求我们用更恰当的方式去规避。

什么样的函数是异步的？

异步的概念和非阻塞是息息相关的，我们通过 ajax 请求的时候一般是通过异步的方式：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/', true);  // 第三个参数设置为 true， 也就是异步加载
xhr.send();
xhr.onreadystatechange = function(){
    console.log(xhr.status);
}

常见异步模型

1. 回调函数

   陷入回调地狱，解耦程度特别低。

2. 事件监听（on / off / trigger）

   JS 和浏览器提供的原生方法基本都是基于事件触发机制的，耦合度很低，不过事件不能得到流程控制。

3. 发布/订阅模式（Pub / Sub）

   把事件全部交给控制器管理，可以完全掌握事件被订阅的次数，以及订阅者的信息，管理起来特别方便。

   这种方法的性质与“事件监听”类似，但是明显优于后者。因为我们可以通过查看“消息中心”，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。

4. Promise 对象

   Promise 对象是 CommonJS 工作组提出的一种规范，目的是为异步编程提供统一的接口。简单说，它的思想是，每一个异步任务返回一个 Promise 对象，该对象有一个 then 方法，允许指定回调函数。

   promise 模式在任何时候都处于一下 3 中状态之一：未完成(unfulfilled)、已完成(resolved)、和拒绝(rejected)。以 CommonJS Promise/A 标准为例，promise 对象上的 then 方法负责添加针对已完成和拒绝状态下的处理函数。then 方法会返回另一个 promise 对象，以便于形成 promise 管道，这种返回 promise 对象的方式能够支持开发人员把异步操作串联起来，如 then(resolvedHandler, rejectedHandler); 。resolvedHandler 回调函数在 promise 对象进入完成状态时会触发，并传递结果；rejectedHandler 函数会在拒绝状态下调用。

var Promise = function(thens){
    this.thens = thens || [];
}
Promise.prototype = {
    resolve: function(){
        /* move from unfulfilled to resolved */
        var t = this.thens.shift(), n;
        t && ( n ＝ t.apply(null, arguments), n instanceof Promise && ( n.thens = this.thens ) )
    },
    reject: function(){
        /* move from unfulfilled to rejected */
    },
    then: function(n){
        return this.thens.push(n), this;
    }
}