前言
JavaScript 是一门单线程语言，这样就可以得出结论：JavaScript 是按照语句出现顺序执行的
正是因为 JavaScript 是一行一行执行的，所以以为 js 是这样的：
var a = '1';
console.log(a);
var b = '2';
console.log(b);但是实际上 js 是这样的：
setTimeout(function(){
console.log('定时器开始啦')
});
new Promise(function(resolve){
console.log('马上执行 for 循环啦');
for(var i = 0; i < 10000; i++){
i == 99 && resolve();
}
}).then(function(){
console.log('执行 then 函数啦')
});
console.log('代码执行结束');但是依照* js 按照语句出现顺序执行*的理念，浏览器控制台输出的结果如下：
定时器开始啦
马上执行 for 循环啦
执行 then 函数啦
代码执行结束这结果当然是不正确的，要不文章题目也不叫彻底弄懂执行机制，接下来就说到关于 JavaScript 的执行机制
关于 JavaScript
javascript 是一门单线程语言，一切 JavaScript 版的多线程都是单线程模拟出来的
JavaScript 时间循环
既然 JavaScript 是单线程，那么久涉及到任务队列了，就好比只有一个窗口的银行，客户需要排队办理业务，同理 js 任务也要一个一个顺序执行，如果一个任务执行耗时过长，那么后一个任务就必须等着。那么问题来了，假如我们想浏览新闻，但是新闻包含的超清图片加载很慢，难道我们的网页要一直卡着直到图片完全显示出来？因此聪明的程序员将任务分为两类
- 同步任务
- 异步任务
当我们打开网页的时候，网页的渲染过程就是一大堆同步任务，比如页面元素和骨架的渲染；而像加载图片、音乐之类的文件耗时过久的任务，就是异步任务。先以图解的方式来演示JavaScript的执行机制：
分析：
- 同步任务和异步任务分别进入不同的场所，同步的进入主线程，异步的进入 Event Table 并注册函数
- 当指定的事情完成时，Event Table 会将这个函数移入 Event Queue
- 主线程的任务执行完毕为空，会去 Event Queue 读取对应的函数，进入主线程执行
- 以上过程会不断重复，也就是通常所说的 Event Loop (事件循环 javascript 的执行机制)
如何判断主线程执行为空？ js 引擎存在 monitoring process 进程，会持续不断地检查主线程执行栈是否为空，一旦为空，就会去 Event Queue 那里检查是否有等待被调用的函数。
下面使用一段 ajax 代码来说明：
var data = [];
$.ajax({
url:www.javascript.com,
data:data,
success:() => {
console.log('发送成功!');
}
})
console.log('代码执行结束');上面是一段简易的 ajax 请求代码：
- ajax 进入 Event Table，注册回调函数 success
- 执行 console.log(‘代码执行结束’)
- ajax 时间完成，回调函数 success 进入 Event Queue
- 主线程从 Event Queue 读取回调函数 success 执行
setTimeout
setTimeout 就是异步可以延迟执行，经常可以这样，延时 3 秒执行
setTimeout(function() {
console.log('执行任务');
task();
}, 3000);但是正常在使用过程中，就会出现问题，明明是延迟 3 秒，实际却是 5、6 秒才执行函数，先看一个例子：
setTimeout(function task() {
console.log('开始执行任务');
task();
},3000);
console.log(‘执行 console’);根据得出的结论，setTimeout 是异步的，应该限制性 console.log 这个同步任务，控制台打印的语句应该是：
执行 console
开始执行任务修改一下代码：
setTimeout(function task() {
console.log('开始执行任务');
task();
},3000);
sleep(100000);会发现 console 打印语句的时间远远大于 3 秒，先看下程序是怎样执行的
- task() 进入 Event Table 并注册，及时开始
- 执行 sleep 函数，非常慢，计时仍然在继续
- 3 秒到了，计时时间 timeout 完成，task() 进入 Event Queue,但是 sleep 还没执行完，只好继续等着
- sleep 终于执行完了，task() 终于从 Event Queue 进入主线程执行
我们知道 setTimeout 这个函数，是经过指定时间后，把要执行的任务(本例中为 task() )加入到 Event Queue中，又因为是单线程任务要一个一个执行，如果前面的任务需要的时间太久，那么只能等着，导致真正的延迟时间远远大于 3 秒
我们还经常遇到 setTimeout(fn,0) 这样的代码，0秒后执行又是什么意思呢？是不是可以立即执行呢？
答案是不会的，setTimeout(fn,0) 的含义是，指定某个任务在主线程最早可得的空闲时间执行，意思就是不用再等多少秒了，只要主线程执行栈内的同步任务全部执行完成，栈为空就马上执行。
关于setTimeout要补充的是，即便主线程为空，0 毫秒实际上也是达不到的。根据HTML的标准,最少要 4 ms
setInterval
setInterval 是循环执行，对于执行顺序来说，setInterval 会每隔指定的时间将祖册的函数置入 Event Queue,如果耗时太久，一样需要等待。
唯一需要注意的一点是，对于 setInterval(fn,ms) 来说，我们已经知道不是每过 ms 秒会执行一次 fn，而是每过 ms 秒，会有 fn进入 Event Queue。一旦setInterval的回调函数fn执行时间超过了延迟时间 ms，那么就完全看不出来有时间间隔了
Promise 与 process.nextTick(callback)
Promise:是异步编程的一种解决方案，简单说就是一个容器，里面保存着某个异步操作的结果，从语法上来说，promise 是一个对象，他可以获取异步操作的消息，有三种状态：
- pending：进行中
- fullfield：已经成功
- rejected：已经失败
状态改变： - 从 pending 变为 fullfield
- 从 pending 变为 rejected
-
process.nextTick(callback) 类似 node.js 版的 “setTimeout”，在事件循环的下一次循环中调用 callback 回调函数
除了广义的同步任务和异步任务，还有宏任务和微任务
- macro-task(宏任务)：包括整体代码 script, setTimeout, setInterval
- mocro-task(微任务)：Promise, process.nextTrick
不同类型的任务会进入对应的 Event Queue
事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。听起来有点绕，我们用文章最开始的一段代码说明：
setTimeout(function() {
console.log('setTimeout');
})
new Promise(function(resolve) {
console.log('promise');
}).then(function() {
console.log('then');
})
console.log('console');输出结果：
promise
console
then
setTimeout执行顺序：
- 这段代码作为宏任务，进入主线程
- 先遇到 setTimeout, 那么将其回调函数注册分发到宏任务 Event Queue
- 接下来遇到 Promise, new Promise 立即执行， then 函数分配到微任务 Event Queue
- 遇到 console， 立即执行
- 整段代码作为第一个宏任务执行结束，之后在查看有哪些微任务，发现了 then 在微任务中，立即执行
- 第一轮事件循环结束了，开始第二轮循环，先从宏任务 Event Queue 开始，发现了 setTimeout 对应的回调函数，立即执行
- 结束
时间循环、宏任务、微任务的关系如下图：
接下来看一段稍微复杂的代码：
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})输出结果：
1
7
6
8
2
4
3
5
9
11
10
12第一轮事件循环流程分析：
- 整体 Script 作为第一个宏任务进入主线程，遇到 console,输出 1
- 遇到 setTimeout, 其回调函数被分发到宏任务 Event Queue 中，暂且记为 setTimeout1
- 遇到 process.nextTick(),其回调函数被分发到微任务 Event Queue 中，记为 proccess1
- 遇到 promise, 直接执行，输出 7， then 被分发到微任务 Event Queue, 记为 then1
- 又遇到了 setTimeout， 其回调函数被分发到宏任务 Event Queue 中，记为 setTimeout2
| 宏任务 Event Queue | 微任务 Event Queue |
|---|---|
| setTimeout1 | process1 |
setTimeout2|then1|
- 第一轮事件循环宏任务结束，发现了 proccess1 和 then1 两个微任务
- 执行 process1，输出 6
- 执行 then1，输出 8
第一轮事件循环正式结束，这一轮结果输出是 1,7,6,8,那么第二轮事件循环从 setTimeout1 宏任务开始 - 首先遇到 console，输出 2，接下来遇到 proccess.nextTick(),同样将其分发到微任务Event Queue中，记为process2。new Promise立即执行输出4，then也分发到微任务Event Queue中，记为then2
| 宏任务 Event Queue | 微任务 Event Queue |
|---|---|
| setTimeout2 | process2 |
| then2 |
- 第二轮事件循环宏任务结束，发现有 proccess2 和 then2 两个为任务执行
- 执行 proccess2，输出 3
- 执行 then2，输出 5
第二轮事件循环正式结束，这一轮的输出结果是 2,4,3,5，那么第三轮事件循环从 setTimeout2 宏任务执行
- 遇到 console 直接输出 9,
- 将 process.nextTick() 分发到微任务 Event Queue 中。记为 process3
- 直接执行 new Promise，输出11
- 将 then 分发到微任务 Event Queue 中，记为 then3
| 宏任务 Event Queue | 微任务 Event Queue |
|---|---|
| proccess3 | |
| then3 |
- 第三轮事件循环宏任务执行结束，执行两个微任务 proccess3 和 then3
- 输出 10,
- 输出 12
- 第三轮事件循环结束，第三轮输出的是 9,11,20,12
整段代码，进行了三次事件循环，完整输出为： 1,7,6,8,2,4,3,5,9,11,10，12
原文传送门：https://juejin.im/post/59e85eebf265da430d571f89 非常感谢作者