[20161217更新]
在阮一峰老师微博提起 Event Loop:关于 Node 的 Event Loop,一张比较容易懂的图,评论中看到这样一条,大致看了下 Youtube 视频:Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014 的内容,看到一个神奇的网站 latentflip.com/loupe,可以有助于更好的理解 Event Loop,所以记录在这里方便自己有时间时深入理解,在这里对分享的同学表示感谢!

事件循环模型

最近在看《JavaScript 异步编程:设计快速响应的网络应用》这本书,为了更好的理解 JavaScript 异步,参考了 alloyteam 的文章:

从来自 alloyteam 的图例中,可以直观的感受到 setTimeout 的工作原理。
从 setTimeout 说事件循环模型

事件循环模型0

事件循环模型1

事件循环模型2

事件循环模型3

事件循环模型4

事件循环模型5

事件循环模型6

事件循环模型7

事件循环模型8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 第一章 - 深入理解 JavaScript 事件
!function () {
var ajaxRequest = new XMLHttpRequest();
ajaxRequest.open('GET', 'index.json');
ajaxRequest.send(null);
console.log(ajaxRequest.readyState); // 1

console.log(XMLHttpRequest.UNSENT); // 0
console.log(XMLHttpRequest.OPENED); // 1
console.log(XMLHttpRequest.HEADERS_RECEIVED); // 2
console.log(XMLHttpRequest.LOADING); // 3
console.log(XMLHttpRequest.DONE); // 4

ajaxRequest.onreadystatechange = function() {
console.log(ajaxRequest.readyState);
}
}()

基于 JavaScript 的事件循环机制,此时 ajaxRequest 在执行 send 方法后,并不会同步等待 ajax,而是继续执行之后的代码。直到 ajax 完成,才去通知 ajaxRequest.onreadystatechange 回调函数