EventLoop事件循环机制（前端面试题系列）

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

宏任务：包括整体代码script，setTimeout，setInterval

微任务：Promise.then（非newPromise），process.nextTick（node中）

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

<script>
    setTimeout(() => {
        console.log('延时1s');
    }, 1000)
    console.log('开始');
    // 开始
    // 延时1s
</script>

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

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

<script>
    setTimeout(function () {
        console.log('setTimeout');
    }, 1000)
    new Promise(function (resolve) {
        console.log('promise');
    }).then(function () {
        console.log('then');
    })
    console.log('console');
</script>

1、首先setTimeout，放入EventTable中，1s后将回调函数放入宏任务的EventQueue中；

2、newPomise同步代码，立即执行console.log('promise')，然后看到微任务then，因此将其放入微任务EventQueue中；

3、接下来执行同步代码console.log('console')；

4、主线程的宏任务，已经执行完毕，接下来要执行微任务，因此会执行Promise.then，到此，第一轮事件循环执行完毕；

5、第二轮事件循环开始，先执行宏任务，即setTimeout的回调函数，然后查找是否有微任务，没有，事件循环结束。

总结：

事件循环先执行宏任务，其中同步任务立即执行，异步任务加载到对应的EventQueue中，微任务也加载到对应微任务的EventQueue中，所有的同步微任务执行完之后，如果发现微任务的EventQueue中有未执行完的任务，就先执行它们，这样算是完成了一轮事件循环。接下来查看宏任务的队列中是否有异步代码，有的话执行第二轮事件循环，以此类推。

再来看一个复杂点的例子：

<script>
    console.log('1');
    setTimeout(function () {
        console.log('2');
        process.nexTick(function () {
            console.log('3');
        })
        new Promise(function (resolve) {
            console.log('4');
            resolve();
        }).then(function () {
            console.log('5');
        })
    })
    // 1、2、4、3、5
</script>

1、宏任务同步代码console.log('1')；

2、setTimeout，加入宏任务EventQueue，没有发现微任务，第一轮事件循环走完；

3、第二轮事件循环开始，先执行宏任务，从宏任务EventQueue中独取出setTimeout的回调函数；

4、同步代码console.log('2')，发现process.nextTick，加入微任务EventQueue；

5、newPromise，同步执行console.log('4')，发现then，加入微任务EventQueue；

6、宏任务执行完毕，接下来执行微任务，先执行process.nextTick，然后执行Promise.then；

7、微任务执行完毕，第二轮事件循环走完，没有发现宏任务，事件循环结束。