宏任务与微任务理解

前言

我们常常遇到这样的问题：在有setTimeout以及Promise等异步操作的情况下，执行顺序应该是什么样的？比如像下面的这段代码，打印结果应该是什么？

        console.log('1')
        setTimeout(() => {
            console.log('2')
        }, 0);
        console.log('3')
        new Promise((resolve, reject)=>{
            resolve(1)
            console.log('4')
        }).then((res)=>{
            console.log('5')
        })
        console.log('6')

上述代码的执行结果是1，3，4，6，5，2
为什么执行顺序会是这样的呢？

JS运行机制

众所周知，JS是一门单线程的语言，所有的多线程的表象都是单线程模拟出来的。
这样的话，我们就可以把JS的运行看成排队的情况，依次进行，但如果某一任务需要耗时比较久的话，就会阻塞整个进程，因此JS中加入了一个异步任务用来处理一些耗时久的操作。常见的异步操作有setTimeout、setInterval、promise以及UI事件。
JS中的任务分为两类，同步和异步。除此之外，还有一种更为精确的划分，称为宏任务和微任务。

• 宏任务 macro-task：包括整体JS的代码，setTimeout，setInterval
• 微任务 micro-task：Promise，node里面的process.nextTick

那宏任务与微任务是按照什么样的顺序运行的呢？这里就要引入JS的事件循环（Event Loop）机制。
宏任务有自己的任务队列，微任务也有它对应的任务队列。在进入JS的执行代码后，JS执行宏任务的队列，如果遇到了微任务,则扔到微任务队列中，等待该宏任务执行完毕后，则执行该宏任务下的微任务队列。如果遇到另一个异步的宏任务，则加入到宏任务队列中，等待执行。如此循环。

Event Loop.png

如开始时我们的那段代码的执行过程：

        console.log('1')
        setTimeout(() => {
            console.log('2')
        }, 0);
        console.log('3')
        new Promise((resolve, reject)=>{
            resolve(1)
            console.log('4')
        }).then((res)=>{
            console.log('5')
        })
        console.log('6')

1.这段代码作为宏任务打印1；
2.遇到setTimeout的异步的宏任务操作，加入到宏任务队列中等待执行；
3.打印该宏任务中的3；
4.进入promise，打印宏任务中的4，遇到then的异步微任务操作，加入到该微任务队列中；
5.打印宏任务中的6；
6.该宏任务执行完毕，在执行所有的微任务，打印5；
7.执行下一个宏任务，打印setTimeout中的2.

一些案例的思考

1. 循环中的setTimeout

        for(var i=0;i<10;i++){
            setTimeout(() => {
                console.log(i)
            }, 1000);
        }

上述代码会在一秒以后打印十个10。
如果理解了事件循环机制，则可以很轻松的理解上述打印结果。

1.宏任务执行第一次for循环，遇到了setTimeout的异步宏任务，加入到宏任务队列中；
2.宏任务继续执行第二次循环，将第二个setTimeout的异步宏任务加入到宏任务队列中等待执行；
3.该宏任务继续执行，直到最后一次循环后，全局变量i此时为10,循环结束；
4.此时宏任务队列中还有十个setTimeout的宏任务等待执行，当一秒结束后，所有的宏任务依次执行，会依次打印i的值，此时i已经变为10了。

2. setInterval不一定会按时执行

setInterval是每隔一段时间，需要执行代码，如果setInterval中的函数需要执行的时间超过了setInterval设置的间隔时间，则间隔时间也就不起作用了。

总结：

了解JS的运行机制（事件循环机制）对于掌握执行顺序有本质性的帮助。
JS是一门单线程的语言，对于异步操作，都是用同步去模拟的。

参考文献

本文主要参考于下方掘金的这篇博客，讲的十分清楚，膜拜作者。
这一次，彻底弄懂 JavaScript 执行机制