关于宏任务微任务的题

第一道题:

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的事件循环调度的就是宏任务队列。一个宏任务执行完毕后会去检查微任务队列,如果微任务队列有任务,则按序执行之,至微任务队列为空,然后去宏任务队列执行下一个宏任务,就这么简单。

看上面的题,当前正在执行的脚本也是一个宏任务。首先,当前脚本推入执行栈执行,先碰到的是一个定时器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

原文:
https://www.mengfansheng.com/2018/10/13/%E5%85%B3%E4%BA%8E%E5%AE%8F%E4%BB%BB%E5%8A%A1%E5%BE%AE%E4%BB%BB%E5%8A%A1%E7%9A%84%E4%B8%80%E9%81%93%E9%A2%98/

第二道题:

async  function  async1 ()  {
    console.log('2 async1 start');
    await  async2(); // await 后面的代码相当于then()的回调函数
    console.log('6 async1 end')
}
async  function  async2 ()  {
    console.log('3 async2')
}
console.log('1 script start');
setTimeout(function ()  {
    console.log('8 setTimeout')
},  0);
async1();
new  Promise(function (resolve)  {
    console.log('4 promise1');
    resolve()
}).then(function ()  {
    console.log('7 promise2')
});
console.log('5 script end')

执行的结果:


image.png

async

async 函数默认返回一个promise对象
如果async函数中的代码正常执行,则会调用Promise.resolve()包装返回的内容
如果函数内的代码报错,则调用Promise.reject()抛出错误

async function async2(){
    const a = 'a'
    console.log(a)
    return a;
}
async2()
// Promise {<fulfilled>: "a"}

宏任务:

script
setTimeout
setInterval
setImmediate
I/O
UI rendering

微任务:

  1. process.nextTick(node 独有)
  2. promise
  3. MutationObserver

宏任务和微任务的执行顺序:

image.png

参考文献:

这一次,彻底弄懂 JavaScript 执行机制(别还不知道什么是宏任务,什么是微任务)

微任务、宏任务与Event-Loop

推荐阅读更多精彩内容