一道题

下面代码执行后控制台会怎么输出？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
setTimeout(()=>{
    console.log('A');
},0);
var obj={
    func:function () {
        setTimeout(function () {
            console.log('B')
        },0);
        return new Promise(function (resolve) {
            console.log('C');
            resolve();
        })
    }
};
obj.func().then(function () {
    console.log('D')
});
console.log('E');

题目涉及到js的宏任务微任务，讲起来其实很简单。

js任务队列有两种，宏任务队列，微任务队列。js的事件循环调度的就是宏任务队列。一个宏任务执行完毕后会去检查微任务队列，如果微任务队列有任务，则按序执行之，至微任务队列为空，然后去宏任务队列执行下一个宏任务，就这么简单。

看上面的题，当前正在执行的脚本也是一个宏任务。首先，当前脚本推入执行栈执行，先碰到的是一个定时器setTimeout，它会创建一个宏任务放到宏任务队列（暂记为setTimeoutA）并且执行的时候会打印一个A，接下来是一个对象声明，然后是调用对象的func方法，此时func方法被推入执行栈。func方法首先创建了一个定时器，所以宏任务队列又会增加一个宏任务（暂记为setTimeoutB），该定时器会输出一个B。接下来方法创建一个Promise并返回，我们知道Promise创建的时候会立即执行，所以这个时候控制台就出现了第一个打印出来的值C，该Promise有一个回调，该回调会被当成是微任务添加到微任务队列（暂记为PromiseD），并且该回调执行时会在控制台打印出D。接下来func执行完了，方法退栈，然后继续往下执行，接下来的代码很简单，直接在控制台打印输出了一个E。此时控制台已经输出了C、E

上面的这个脚本作为一个宏任务执行完了之后该去检查微任务队列。根据上面的分析，我们先看下当前宏任务队列和微任务队列都有哪些任务。

宏任务队列：setTimeoutA，setTimeoutB

微任务：PromiseD

因为一个宏任务执行完毕后会去检查微任务队列，并执行队列里的微任务。此时微任务队列中有PromiseD，所以执行该微任务，并在控制台打印出D。然后，微任务队列空了，所以继续去执行宏任务队列中的任务。所以，接下来就是setTImeoutA，控制台输出A。然后去检查微任务队列，此时微任务队列为空。继续宏任务队列的任务。setTimeoutB任务被执行，控制台输出B。此时，所有队列任务就都执行完了。

此时，控制台输出的字符串按顺序就是是：C，E，D，A，B