JS中EventLoop事件循环机制的总结

什么是Event Loop

JavaScript的事件分两种，宏任务(macro-task)和微任务(micro-task)

• 宏任务：包括整体代码script，setTimeout，setInterval
• 微任务：Promise.then(非new Promise)，process.nextTick(node中)

先来了解一下事件的执行顺序——先执行宏任务，然后执行微任务，任务有同步的任务和异步的任务，同步的进入主线程，异步的进入Event Table并注册函数，异步事件完成后，会将回调函数放在队列中，如果还有异步的宏任务，那么就会进行循环执行上述的操作。

setTimeout(() => {
    console.log('延时1秒');
},1000)
console.log("开始")

//开始
//延时1秒

上述代码，setTimeout函数是宏任务，且是异步任务，因此会将函数放入Event Table并注册函数，经过指定时间后，把要执行的任务加入到Event Queue中，等待同步任务console.log(“开始”)执行结束后，读取Event Queue中setTimeout的回调函数执行。

上述代码不包含微任务，接下来看包含微任务的代码：

setTimeout(function() {
    console.log('setTimeout');
},1000)

new Promise(function(resolve) {
    console.log('promise');
}).then(function() {
    console.log('then');
})

console.log('console');

• 首先setTimeout，放入Event Table中，1秒后将回调函数放入宏任务的Event Queue中
• new Promise 同步代码，立即执行console.log(‘promise’),然后看到微任务then，因此将其放入微任务的Event Queue中
• 接下来执行同步代码console.log(‘console’)
• 主线程的宏任务，已经执行完毕，接下来要执行微任务，因此会执行Promise.then，到此，第一轮事件循环执行完毕
• 第二轮事件循环开始，先执行宏任务，即setTimeout的回调函数，然后查找是否有微任务，没有，事件循环结束

总结：
事件循环先执行宏任务，其中同步任务立即执行，异步任务加载到对应的Event Queue中，微任务也加载到对应的微任务的Event Queue中，所有的同步微任务执行完之后，如果发现微任务的Event Queue中有未执行完的任务，先执行他们这样算是完成了一轮事件循环。接下来查看宏任务的队列中是否有异步代码，有的话执行第二轮的事件循环，以此类推。
再来看一个复杂点的例子：

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')
    })
})

//1、2、4、3、5

• 宏任务同步代码console.log(‘1’)
• setTimeout，加入宏任务Event Queue，没有发现微任务，第一轮事件循环走完
• 第二轮事件循环开始，先执行宏任务，从宏任务Event Queue中独取出setTimeout的回调函数
• 同步代码console.log(‘2’),发现process.nextTick，加入微任务Event Queue
• new Promise，同步执行console.log(‘4’),发现then，加入微任务Event Queue
• 宏任务执行完毕，接下来执行微任务，先执行process.nextTick，然后执行Promise.then
• 微任务执行完毕，第二轮事件循环走完，没有发现宏任务，事件循环结束

以上就是我对事件循环的个人见解，如有错误欢迎指正