一. 单线程

我们常说“JavaScript是单线程的”。

所谓单线程，是指在JS引擎中担任诠释和实行JavaScript代码的线程只要一个。无妨叫它主线程。

然则实际上还存在其他的线程。比方：处置惩罚AJAX要求的线程、处置惩罚DOM事宜的线程、定时器线程、读写文件的线程(比方在Node.js中)等等。这些线程能够存在于JS引擎以内，也能够存在于JS引擎以外，在此我们不做辨别。无妨叫它们事变线程。

二. 同步和异步

假定存在一个函数A：

A(args...);

同步：假如在函数A返回的时刻，挪用者就能够获得预期结果(即拿到了预期的返回值或许看到了预期的结果)，那末这个函数就是同步的。

比方：

  Math.sqrt(2);
  console.log('Hi');

第一个函数返回时，就拿到了预期的返回值：2的平方根。

第二个函数返回时，就看到了预期的结果：在控制台打印了一个字符串。

所以这两个函数都是同步的。

异步：假如在函数A返回的时刻，挪用者还不能够获得预期结果，而是须要在未来经由历程肯定的手腕获得，那末这个函数就是异步的。

比方：

fs.readFile('foo.txt', 'utf8', function(err, data) {
    console.log(data);
});

在上面的代码中，我们愿望经由历程fs.readFile函数读取文件foo.txt中的内容，并打印出来。

然则在fs.readFile函数返回时，我们希冀的结果并不会发作，而是要比及文件悉数读取完成以后。假如文件很大的话能够要很长时候。

下面以AJAX要求为例，来看一下同步和异步的区分：

**异步AJAX：**

主线程：“你好，AJAX线程。请你帮我发个HTTP要求吧，我把要求地点和参数都给你了。”
AJAX线程：“好的，主线程。我马上去发，但能够要花点儿时候呢，你能够先去忙别的。”
主线程：：“感谢，你拿到响应后告诉我一声啊。”
(接着，主线程做其他事变去了。一顿饭的时候后，它收到了响应抵达的关照。) 

**同步AJAX：**

主线程：“你好，AJAX线程。请你帮我发个HTTP要求吧，我把要求地点和参数都给你了。”

AJAX线程：“......”
主线程：：“喂，AJAX线程，你如何不说话？”
AJAX线程：“......”
主线程：“喂！喂喂喂！”
AJAX线程：“......”
(一炷香的时候后)
主线程：：“喂！求你说句话吧！”
AJAX线程：“主线程，不好意思，我在事变的时刻不能说话。你的要求已发完了，拿到响应数据了，给你。” 

恰是由于JavaScript是单线程的，而异步轻易完成非壅塞，所以在JavaScript中关于耗时的操纵或许时候不确定的操纵，运用异步就成了必定的挑选。异步是这篇文章关注的重点。

三. 异步历程的组成要素

从上文能够看出，异步函数实际上很快就挪用完成了。然则背面另有事变线程实行异步使命、关照主线程、主线程挪用回调函数等许多步骤。我们把全部历程叫做异步历程。异步函数的挪用在全部异步历程当中，只是一小部分。

总结一下，一个异步历程一般是如许的：

主线程提议一个异步要求，响应的事变线程吸收要求并示知主线程已收到(异步函数返回)；主线程能够继承实行背面的代码，同时事变线程实行异步使命；事变线程完成事变后，关照主线程；主线程收到关照后，实行肯定的行动(挪用回调函数)。 

异步函数一般具有以下的情势：

A(args..., callbackFn)

它能够叫做异步历程的提议函数，或许叫做异步使命注册函数。args是这个函数须要的参数。callbackFn也是这个函数的参数，然则它比较特别所以零丁列出来。

所以，从主线程的角度看，一个异步历程包含下面两个要素：

提议函数(或叫注册函数)A

回调函数 callbackFn 

它们都是在主线程上挪用的，个中注册函数用来提议异步历程，回调函数用来处置惩罚结果。

举个详细的例子：

setTimeout(fn, 1000);

个中的 setTimeout 就是异步历程的提议函数， fn 是回调函数。

注重：前面说的情势 A(args…, callbackFn) 只是一种笼统的示意，并不代表回调函数肯定要作为提议函数的参数，比方：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = xxx; // 增加回调函数
xhr.open('GET', url);
xhr.send(); // 提议函数

提议函数和回调函数就是星散的。

四. 音讯行列和事宜轮回

上文讲到，异步历程当中，事变线程在异步操纵完成后须要关照主线程。那末这个关照机制是如何完成的呢？答案是应用音讯行列和事宜轮回。

用一句话归纳综合：

事变线程将音讯放到音讯行列，主线程经由历程事宜轮回历程去取音讯。 

音讯行列：音讯行列是一个先进先出的行列，它内里存放着种种音讯。

事宜轮回：事宜轮回是指主线程反复从音讯行列中取音讯、实行的历程。

实际上，主线程只会做一件事变，就是从音讯行列内里取音讯、实行音讯，再取音讯、再实行。当音讯行列为空时，就会守候直到音讯行列变成非空。而且主线程只要在将当前的音讯实行完成后，才会去取下一个音讯。这类机制就叫做事宜轮回机制，取一个音讯并实行的历程叫做一次轮回。

事宜轮回用代码示意大概是如许的：

while(true) {
    var message = queue.get();
    execute(message);
}

那末，音讯行列中放的音讯详细是什么东西？音讯的详细组织固然跟详细的完成有关，然则为了简朴起见，我们能够以为：

音讯就是注册异步使命时增加的回调函数。 

再次以异步AJAX为例，假定存在以下的代码：

$.ajax('http://segmentfault.com', function(resp) {
    console.log('我是响应：', resp);
});
 
// 其他代码
...
...
...

主线程在提议AJAX要求后，会继承实行其他代码。AJAX线程担任要求segmentfault.com，拿到响应后，它会把响应封装成一个JavaScript对象，然后组织一条音讯：

// 音讯行列中的音讯就长这个模样
var message = function () {
    callbackFn(response);
}

个中的 callbackFn 就是前面代码中获得胜利响应时的回调函数。

主线程在实行完当前轮回中的一切代码后，就会到音讯行列掏出这条音讯(也就是 message 函数)，并实行它。到此为止，就完成了事变线程对主线程的关照，回调函数也就获得了实行。假如一开始主线程就没有供应回调函数，AJAX线程在收到HTTP响应后，也就没必要关照主线程，从而也没必要往音讯行列放音讯。

用图示意这个历程就是：

从上文中我们也能够获得如许一个显著的结论，就是：

异步历程的回调函数，肯定不在当前这一轮事宜轮回中实行。 

五. 异步与事宜

上文中说的“事宜轮回”，为何内里有个事宜呢？那是由于：

音讯行列中的每条音讯实际上都对应着一个事宜。 

上文中一向没有提到一类很主要的异步历程：DOM事宜。

举例来说：

var button = document.getElement('#btn');
button.addEventListener('click', function(e) {
    console.log();
});

从事宜的角度来看，上述代码示意：在按钮上增加了一个鼠标单击事宜的事宜监听器；当用户点击按钮时，鼠标单击事宜触发，事宜监听器函数被挪用。

从异步历程的角度看， addEventListener 函数就是异步历程的提议函数，事宜监听器函数就是异步历程的回调函数。事宜触发时，示意异步使命完成，会将事宜监听器函数封装成一条音讯放到音讯行列中，守候主线程实行。

事宜的观点实际上并非必需的，事宜机制实际上就是异步历程的关照机制。我以为它的存在是为了编程接口对开发者更友爱。

另一方面，一切的异步历程也都能够用事宜来形貌。比方：setTimeout能够算作对应一个时候到了的事宜。前文的 setTimeout(fn, 1000); 能够算作：

timer.addEventListener('timeout', 1000, fn);

六. 生产者与消费者

从生产者与消费者的角度看，异步历程是如许的：

事变线程是生产者，主线程是消费者(只要一个消费者)。事变线程实行异步使命，实行完成后把对应的回调函数封装成一条音讯放到音讯行列中；主线程不断地从音讯行列中取音讯并实行，当音讯行列空时主线程壅塞，直到音讯行列再次非空。 

PS：ECMAScript 262范例中，并没有对异步、事宜行列等观点及其完成的形貌。这些都是详细的JavaScript运行时环境运用的机制。本文重点是形貌异步历程的道理，为了便于明白做了许多简化。所以文中的某些术语的运用多是不准确的，详细细节也未必是准确的，比方音讯行列中音讯的组织。请读者注重。