Js 事件循环

Js事件循环的理解

代码运行不可避免地会涉及到一个非代码顺序执行的问题，典型的场景就是异步请求，但Js又是单线程运行，所以需要有一个事件循环机制来实现这一系列操作。

两个任务执行队列 - Micro Task(微任务), Macro Task(宏任务)

1. 维护这两个队列
2. 从宏任务队列中取出一个任务执行
3. 在执行完这个宏任务，取出下一个宏任务之前，循环取出当前微任务队列中所有微任务并按顺序执行完
4. 取出下一个宏任务，重复3

举一个例子来展示这个过程。

console.log("start")
console.log(a)
var a = 1
setTimeout(() => {
    a += 1
    console.log(a)
}, 1000)
new Promise((resolve, reject) => {
    console.log(a)
    resolve()
    setTimeout(() => {
		console.log('promise timeout1')
    }, 500)
}).then(() => {
    console.log('then1')
})
new Promise((resolve, reject) => {
    console.log(a)
    setTimeout(() => {
        resolve()
		console.log('promise timeout2')
    }, 1500)
}).then(() => {
    console.log('then2')
})
console.log("end")

这个例子中的结果是：

start undefined 1 1 end then1 0.5s后：promise timeout1 1s后：2 1.5s后：promise timeout2 同时：then2

setTimeout会将其中代码放入宏任务中，Promise会将其中代码放入微任务中，当前执行函数是初始宏任务

相关文章地址: EventLoop