Event Loop新手讲解、相关代码练习

今天由于工作原因没有额外的时间去学习新知识，正好白天同事分享了有关执行顺序的的代码，我来为大家解读一下：
解读之前呢，建议大家先学习一下js的event loop机制

方便理解，我找了一张关于event loop机制的图帮助大家理解

Event Table
Event Table 可以理解成一张 事件->回调函数 对应表
它就是用来存储 JavaScript 中的异步事件 (request, setTimeout, IO等) 及其对应的回调函数的列表

---

Event Queue
Event Queue 简单理解就是 回调函数 队列，所以它也叫 Callback Queue
当 Event Table 中的事件被触发，事件对应的 回调函数 就会被 push 进这个 Event Queue，然后等待被执行

• 开始，任务先进入 主调用栈
• 同步任务直接在栈中等待被执行，异步任务从 主调用栈 移入到 Event Table 注册
• 当对应的事件触发（或延迟到指定时间），Event Table 会将事件回调函数移入 Event Queue 等待
• 当 主调用栈 中没有任务，就从 Event Queue 中拿出一个任务放入 主调用栈

Event Loop 指的就是这一整个圈圈：
它不停检查 主调用栈（ Call Stack） 中是否有任务（也叫栈帧）需要执行，如果没有，就检查 Event Queue，从中弹出一个任务，放入 Call Stack 中，如此往复循环。

---

学习完上面知识，做道题巩固一下

console.log('script  start')

async function async1 () {
	await async2()
	console.log('async1 end')
}
async function async2 () {
	console.log('async2 end')
}
async1()

setTimeout(() => {
	console.log('setTimeout')
})

new Promise(resolve => {
	console.log('Promise')
	resolve()
})
.then(function () {
	console.log('promise1')
})
.then(function () {
	console.log('promise2')
})
console.log('script  end')

不绕弯子，我们公布运行结果：
script  start
async2 end
Promise
script  end
async1 end
promise1
promise2
setTimeout

以下事件属于宏任务：

setInterval()
setTimeout()

---

以下事件属于微任务

new Promise()
new MutaionObserver() // 本人确实没怎么用过

await 执行完后，会让出线程。async 标记的函数会返回一个 Promise 对象

解释：
1、从上往下执行函数
2、先执行console.log(‘script start’)同步任务，没有什么异议吧
3、再执行async1()，输出’async2 end‘， 并且函数是个async，会返回一个promise,并且执行完其中的await会让出线程，也就是说await后面的代码是一个微任务需要等待当前同步任务结束后才会执行，即console.log(‘async1 end’)是在微任务中才执行
4、await让出线程后继续执行，走到setTimeout,属于另一个宏任务，放入异步队列中等待当前事件循环结束才会执行
5、继续走，遇到promise，执行console.log(‘Promise’)这句同步任务，没有问题吧，他后面的then是微任务，需要等待当前同步任务结束才执行
6、最后同步任务执行到console.log(‘script end’)
7、同步任务都执行完了，再看按照同步任务执行顺序读取到的微任务的执行顺序为：console.log(‘async1 end’)、console.log(‘promise1’)、console.log(‘promise2’)
8、以上所有微任务执行结束，当前调用栈结束，开始下轮Event Loop，读取到异步队列中的setTimeOut,然后执行console.log(‘setTimeout’)