尽人皆知，JavaScript 的实行环境是单线程的，所谓的单线程就是一次只能完成一个使命，其使命的调理体式格局就是列队，这就和火车站卫生间门口的守候一样，前面的那个人没有搞定，你就只能站在背面列队等着。在事宜行列中加一个延时，如许的题目便能够获得减缓。

A: 嘿，哥们儿，快点！
B: 我要三分钟，你先等着，完了叫你~
A: 好的，记得叫我啊~ 你（C）也等着吧，完了叫你~
C: 嗯！

通知背面列队的人一个正确的时刻，如许背面的人就能够应用这段时刻去干点别的事变，而不是一切的人都排在行列后埋怨。我写了一段递次来处置惩罚这个题目：

/**
* @author Barret Lee
* @email barret.china@gmail.com
* @description 事宜行列治理，含延时
*/
var Q = {
    // 保留行列信息
    a: [],
    // 增加到行列 queue
    q: function(d){
        // 增加到行列假如不是函数或许数字则不处置惩罚
        if(!/function|number/.test(typeof d)) return;
        Q.a.push(d);
        // 返回对本身的援用
        return Q;
    },
    // 实行行列 dequeue
    d: function(){
        var s = Q.a.shift();
        // 假如已到了行列终点则返回
        if(!s) return;
        // 假如是函数，直接实行，然后继承 dequeue
        if(typeof s === "function") {
            s(), Q.d();
            return;
        }
        // 假如是数字，该数字作为耽误时刻，耽误 dequeue
        setTimeout(function(){
            Q.d();
        }, s);
    }
};

这段递次加了许多解释，置信有 JS 基础的童鞋都能够看懂，应用上面这段代码测试下：

// 历程纪录函数
function record(s){
    var div = document.createElement("div");
    div.innerHTML = s;
    console.log(s);
    document.body.appendChild(div);
}
Q
.q(function(){
    record("0 <i style='color:blue'>3s 以后搞定，0 把 1 叫进来</i>");
})
.q(3000)  // 延时 3s
.q(function(){
    record("1 <i style='color:blue'>2s 以后搞定，1 把 2 叫进来</i>");
})
.q(2000)  // 延时 2s
.q(function(){
    record("2 <span style='color:red'>背面没人了，OK，茅厕关门~</span>");
})
.d();     // 实行行列

能够戳戳这个 DEMO。

本文地点：http://barretlee.github.io/javascript-asynchronous-programming，转载请申明出处。

一、Javascript 异步编程道理

明显，上面这类体式格局和银行取号守候有些相似，只不过银行取号我们并不知道上一个人须要多久才会完成。这是一种非壅塞的体式格局处置惩罚题目。下面来讨论下 JavaScript 中的异步编程道理。

1. setTimeout 函数的弊病

延时处置惩罚固然少不了 setTimeout 这个神器，许多人对 setTimeout 函数的明白就是：延时为 n 的话，函数会在 n 毫秒以后实行。事实上并非云云，这里存在三个题目，一个是 setTimeout 函数的实时性题目，能够测试下面这串代码：

/var d = new Date, count = 0, f, timer;
timer = setInterval(f = function (){
    if(new Date - d > 1000) 
        clearInterval(timer), console.log(count);
    count++;
}, 0);

能够看出 1s 中运转的次数大概在 200次 摆布，有人会说那是因为 new Date 和 函数作用域的转换斲丧了时刻，实在不然，你能够再尝尝这段代码：

var d = new Date, count = 0;
while(true) {
    if(new Date - d > 1000) {
        console.log(count);
        break;
    }
    count++;
}

我这里显现的是 351813，也就是说 count 累加了 35W+ 次，这申明了什么呢？setInterval 和 setTimeout 函数运转的最短周期是 5ms 摆布，这个数值在 HTML范例 中也是有提到的:

5. Let timeout be the second method argument, or zero if the argument was omitted.
假如 timeout 参数没有写，默以为 0
7. If nesting level is greater than 5, and timeout is less than 4, then increase timeout to 4.
假如嵌套的条理大于 5 ，而且 timeout 设置的数值小于 4 则直接取 4.

为了让函数能够更疾速的相应，部份浏览器供应了越发高等的接口（当 timeout 为 0 的时刻，能够运用下面的体式格局替换，速率更快）：

• requestAnimationFrame 它许可 JavaScript 以 60+帧/s 的速率处置惩罚动画，他的运转时刻距离比 setTimeout 是要短许多的。
• process.nextTick 这个是 NodeJS 中的一个函数，应用他能够险些到达上面看到的 while 轮回的效力
• ajax 或许 插进去节点 的 readState 变化
• MutationObserver
• setImmediate
• …

这些东西下次有空再细谈。之前研讨司徒正美的 avalon 源码的时刻，看到了相干的内容，有兴致的能够看看：

//视浏览器状况采纳最快的异步回调
var BrowserMutationObserver = window.MutationObserver || window.WebKitMutationObserver
if (BrowserMutationObserver) { //chrome18+, safari6+, firefox14+,ie11+,opera15
    avalon.nextTick = function(callback) { //2-3ms
        var input = DOC.createElement("input")
        var observer = new BrowserMutationObserver(function(mutations) {
            mutations.forEach(function() {
                callback()
            })
        })
        observer.observe(input, {
            attributes: true
        })
        input.setAttribute("value", Math.random())
    }
} else if (window.VBArray) { 
//IE下这个平常只需1ms,而且没有副作用，不会发明请求，
//setImmediate假如只实行一次，与setTimeout一样要140ms高低
    avalon.nextTick = function(callback) {
        var node = DOC.createElement("script")
        node.onreadystatechange = function() {
            callback() //在interactive阶段就触发
            node.onreadystatechange = null
            root.removeChild(node)
            node = null
        }
        root.appendChild(node)
    }
} else {
    avalon.nextTick = function(callback) {
        setTimeout(callback, 0)
    }
}

上面说了一堆，目标是想申明， setTimeout 是存在肯定时刻距离的，并非设定 n 毫秒实行，他就是 n 毫秒实行，能够会有一点时刻的耽误（2ms摆布）。然后说说他的第二个瑕玷，先看代码：

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

我们希冀 console 在 1s 以后出效果，可事实上他倒是在 2075ms 以后运转的，这就是 JavaScript 单线程给我们带来的懊恼，while轮回壅塞了 setTimeout 函数的实行。接着是他的第三个缺点，try..catch捕捉不到他的毛病：

try{
    setTimeout(function(){
        throw new Error("我不愿望这个毛病涌现！")
    }, 1000);
} catch(e){
    console.log(e.message);
}

能够说 setTimeout 是异步编程不可缺乏的角色，然则它本身就存在这么多的题目，这就请求我们用越发适当的体式格局去躲避！

2. 什么样的函数为异步的

异步的观点和非壅塞是是息息相干的，我们经由历程 ajax 请求数据的时刻，平常采纳的是异步的体式格局：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/', true);
xhr.send();
xhr.onreadystatechange = function(){
    console.log(xhr.status);
}

在 xhr.open 中我们把第三个参数设置为 true ，也就是异步加载，当 state 发作转变的时刻，xhr 马上相应，触发相干的函数。有人想过用如许的体式格局来处置惩罚：

while(1) {
    if(xhr.status === "complete") {
        // dosomething();
        break;
    }
}

而事实上，这里的推断已陷入了死轮回，即便是 xhr 的 status 已发作了转变，这个死轮回也跳不出来，那末这里的异步是基于事宜的。

某个函数会致使将来再运转的另一个函数，后者取自于事宜行列（若背面这个函数是作为参数传递给前者的，则称其为回调函数，简称为回调）。—— 摘自《Async Javascript》

因为 JavaScript 的单线程特性，他没有供应一种机制以阻挠函数在其异步操纵终了之前返回，事实上，除非函数返回，不然不会触发任何异步事宜。

3. 罕见的异步模子

1） 最罕见的一种体式格局是，高阶函数（泛函数）

step1(function(res1){
    step2(function(res2){
        step3(function(res3){
            //...
        });
    });
});

解耦水平迥殊低，假如送入的参数太多会显得很乱！这是最罕见的一种体式格局，把函数作为参数送入，然后回调。

2） 事宜监听

f.on("evt", g);
function f(){
    setTimeout(function(){
        f.trigger("evt");
    })
}

JS 和 浏览器供应的原生要领基础都是基于事宜触发机制的，耦合度很低，不过事宜不能获得流程控制。

3） 宣布/定阅( Pub/Sub )

E.subscribe("evt", g);
function f(){
    setTimeout(function () {
    　　// f的使命代码
    　　E.publish("evt");
    }, 1000);
}

把事宜悉数交给 E 这个控制器治理，能够完整控制事宜被定阅的次数，以及定阅者的信息，治理起来迥殊轻易。

4） Promise 对象（deferred 对象）

关于这里的内容能够看看 屈屈 写的文章，说的比较细致。

Promise/A+ 范例是对 Promise/A 范例的补充和修正，他涌现的目标是为了一致异步编程中的接口，JS中的异步编程是异常广泛的事变，也涌现了许多的异步库，假如不一致接口，对开发者来讲也是一件异常痛楚的事变。

在Promises/A范例中，每一个使命都有三种状况：默许(pending)、完成(fulfilled)、失利(rejected)。

• 默许状况能够单向转移到完成状况，这个历程叫resolve，对应的要领是deferred.resolve(promiseOrValue)；
• 默许状况还能够单向转移到失利状况，这个历程叫reject，对应的要领是deferred.reject(reason)；
• 默许状况时，还能够经由历程deferred.notify(update)来宣布使命实行信息，如实行进度；
• 状况的转移是一次性的，一旦使命由初始的pending转为其他状况，就会进入到下一个使命的实行历程当中。

二、异步函数中的毛病处置惩罚

前面已提到了 setTimeout 函数的一些题目，JS 中的 try..catch 机制并不能拿到 setTimeout 函数中涌现的毛病，一个 throw error 的影响局限有多大呢？我做了一个测试：

<script type="text/javascript">
    throw new Error("error");
    console.log("show me"); // 并没有打印出来
</script>
<script type="text/javascript">
    console.log("show me"); // 打印出来了
</script>

从上面的测试我们能够看出，throw new Error 的作用局限就是阻断一个 script 标签内的递次运转，然则不会影响下面的 script。这个测试没什么作用，只是想通知人人不要忧郁一个 Error 会影响全局的函数实行。所以把代码分为两段，一段能够失足的，一段确保不会失足的，如许不至于让全局代码都死掉，固然如许的处置惩罚体式格局是不可取的。

光荣的是 window 全局对象上有一个方便的函数，window.error，我们能够应用他捕捉到一切的毛病，并作出相应的处置惩罚，比方：

window.onerror = function(msg, url, line){
    console.log(msg, url, line);
    // 必需返回 true，不然 Error 照样会触发壅塞递次
    return true;
}
setTimeout(function(){
    throw new Error("error");
    // console：
    //Uncaught Error: error path/to/ie6bug.html 99  
}, 50);

我们能够对毛病举行封装处置惩罚：

window.onerror = function(msg, url, line){
    // 截断 "Uncaught Error: error"，猎取毛病范例
    var type = msg.slice(16);
    switch(type){
        case "TooLarge": 
            console.log("The number is too large");
        case "TooSmall": 
            console.log("The number is too Small");
        case "TooUgly": 
            console.log("That's Barret Lee~");
        // 假如不是我们预定义的毛病范例，则反馈给背景监控
        default:
            $ && $.post && $.post({
                "msg": msg,
                "url": url,
                "line": line
            })
    }
    // 记得这里要返回 true，不然毛病阻断递次。
    return true;
}
setTimeout(function(){
    if( something )  throw new Error("TooUgly");
    // console：
    //That's Barret Lee~ 
}, 50);

很明显，报错已不可怕了，应用 window 供应的 onerror 函数能够很轻易地处置惩罚毛病并作出实时的回响反映，假如涌现了不可知的毛病，能够把信息 post 到背景，这也算是一个异常不错的监控体式格局。

不过如许的处置惩罚存在一个题目，一切的毛病我们都给屏障了，但有些毛病本应当阻断一切递次的运转的。比方我们经由历程 ajax 猎取数据中出了毛病，递次误以为已拿到了数据，本应当停下事情报出这个致命的毛病，然则这个毛病被 window.onerror 给截获了，从而举行了毛病的处置惩罚。

window.onerror 算是一种迥殊暴力的容错手腕，try..catch 也是云云，他们底层的完成就是应用 C/C++ 中的 goto 语句完成，一旦发明毛病，不论现在的客栈有多深，不论代码运转到了那边，直接跑到 顶层 或许 try..catch 捕捉的那一层，这类一脚踢开毛病的处置惩罚体式格局并非很好，我以为。

三、JavaScript 多线程手艺引见

最先说了异步编程和非壅塞这个观点密切相干，而 JavaScript 中的 Worker 对象能够建立一个自力线程来处置惩罚数据，很天然的处置惩罚了壅塞题目。我们能够把沉重的盘算使命交给 Worker 去捣腾，等他处置惩罚完了再把数据 Post 过来。

var worker = new Worker("./outer.js");
worker.addEventListener("message", function(e){
    console.log(e.message);
});
worker.postMessage("data one");
worker.postMessage("data two");
// outer.js
self.addEventListener("message", function(e){
    self.postMessage(e.message);
});

上面是一个简朴的例子，假如我们建立了多个 Worker，在监听 onmessage 事宜的时刻还要推断下 e.target 的值从而得知数据源，固然，我们也能够把数据源封装在 e.message 中。

Worker 是一个有效的东西，我能够能够在 Worker 中运用 setTimeout，setInterval等函数，也能够拿到 navigator 的相干信息，最主要的是他能够建立 ajax 对象和 WebSocket 对象，也就是说他能够直接向服务器请求数据。不过他不能接见 DOM 的信息，更不能直接处置惩罚 DOM，这个实在很好明白，主线程和 Worker 是两个自力的线程，假如二者都能够修正 DOM，那岂不是得设置一个贫苦的互斥变量？！另有一个值得注意的点是，在 Worker 中我们能够运用 importScript 函数直接加载剧本，不过这个函数是同步的，也就是说他会凝结 Worker 线程，直到 Script 加载终了。

importScript("a.js", "b.js", "c.js");

他能够增加多个参数，加载的递次就是 参数的递次。平常会运用 Worker 做哪些事变呢？

• 数据的盘算和加密 如盘算斐波拉契函数的值，迥殊费时；再比方文件的 MD5 值比对，一个大文件的 MD5 值盘算也是很费时的。
• 音、视频流的编解码事情，这些事情搞微信的手艺人员应当没有少做。有兴致的童鞋能够看看这个手艺分享，是杭州的 hehe123 搞的一个WebRTC 分享，内容还不错。
• 等等，你以为费时刻的事变都能够交给他做

然后要说的是 SharedWorker，这是 web 通信范畴将来的一个趋向，有些人以为 WebSocket 已异常不错了，然则一些基于 WebSocket 的架构，服务器要为每一个页面保护一个 WebSocket 代码，而 SharedWorker 异常给力，他是多页面通用的。

<input id="inp" /><input type="button" id="btn" value="发送" />
<script type="text/javascript">
    var sw = new SharedWorder("./outer.js");
    // 绑定事宜
    sw.port.onmessage = function(e){
        console.log(e.data);
    };
    btn.onclick = function(){
        sw.port.postMessage(inp.value);
        inp.value = "";
    };
    // 建立衔接，最先监听
    sw.port.start();
</script>
// outer.js
var pool = [];
onconnect = function(e) {
    // 把衔接的页面放入衔接池
    pool.push(e.ports[0]);
    // 收到信息马上播送
    e.ports[0].onmessage = function(e){
        for(var i = 0;i < pool.length; i++)
            // 播送信息
            pool[i].postMessage(e.data);
    };
};

简朴明白 SharedWorker，就是把运转的一个线程作为 web背景递次，完整不须要背景剧本介入，这个对 web通信，尤其是游戏开发者，以为是一个福音！

四、ECMAScript 6 中 Generator 对象搞定异步

异步两种罕见体式格局是 事宜监听 以及 函数回调。前者没什么好说的，事宜机制是 JS 的中心，而函数回调这块，过于深切的嵌套几乎就是一个地狱，能够看看这篇文章，这是一篇引见异步编程的文章，什么叫做“回调地狱”，能够看看下面的例子：

fs.readdir(source, function(err, files) {
  if (err) {
    console.log('Error finding files: ' + err)
  } else {
    files.forEach(function(filename, fileIndex) {
      console.log(filename)
      gm(source + filename).size(function(err, values) {
        if (err) {
          console.log('Error identifying file size: ' + err)
        } else {
          console.log(filename + ' : ' + values)
          aspect = (values.width / values.height)
          widths.forEach(function(width, widthIndex) {
            height = Math.round(width / aspect)
            console.log('resizing ' + filename + 'to ' + height + 'x' + height)
            this.resize(width, height).write(destination + 'w' + width + '_' + filename, function(err) {
              if (err) console.log('Error writing file: ' + err)
            })
          }.bind(this))
        }
      })
    })
  }
})

是否是有种想吐的觉得，一层一层的嵌套，虽然说这类嵌套异常一般，倘使每段代码都是如许的显现，置信二次开发者肯定会累死！关于如何解耦我就不细说了，能够转头看看上面那篇回调地狱的文章。

ECMAScript 6中有一个 Generator 对象，过段时刻会对 ES6 中的新知识举行逐一的讨论，这里不多说了，有兴致的同砚能够看看 H-Jin 写的一篇文章运用 (Generator) 生成器处置惩罚 JavaScript 回调嵌套题目，运用 yield 关键词和 Generator 把嵌套给“拉直”了，这类体式格局就像是 chrome 的 DevTool 中运用断点平常，用起来迥殊惬意。

五、串并行的转换

留到下次说吧，笔墨敲多了，累 ：)

六、小结

本文提到了异步编程的相干观点和运用中会碰到的题目，在写文章之前做了三天的调研，不过照样有许多点没说全，下次对异步编程有了更深切的明白再来谈一谈。

七、参考资料

• Javascript异步编程的4种要领 阮一峰
• javascript 异步编程 司徒正美
• HTML Specification web develop group
• Promise/A+ 范例
• 异步编程：When.js疾速上手 JerrryQu
• 《Async Javascript》 By Trevor Burnham
• 异常有意义，却还没有兼容的SharedWorker 次碳酸钴
• HTML5 Web Worker Franky

作者：Barret Lee
出处：http://barretlee.github.io/javascript-asynchronous-programming