JS事件循环机制——宏任务&微任务常考输出题

个人纪录，持续更新。答案在最后。

事件循环执行顺序为：

先执行宏任务script，并执行里面的同步任务；执行栈为空后查询是否存在微任务，存在就立即执行，然后开始下一轮的事件循环。

一

setTimeout(function () {
       console.log(1);
   });
   
new Promise(function(resolve,reject){
    console.log(2)
    resolve(3)
}).then(function(val){
    console.log(val);
})
console.log(4);

二

setTimeout(function () {
    const c = new Promise(function (resolve, reject) {
        console.log(1);
        resolve()
    })
    c.then(() => {
        console.log(2);
    })
    console.log(3);
}, 1000);

const cc = new Promise((resolve, reject) => {
    console.log(5);
    resolve()
}).then(() => {
    setTimeout(function () {
        console.log(6);
    }, 0)
    return 7
}).then(d => {
    console.log(d);
})
console.log(4);

三

console.log(1);
setTimeout(function () {
    console.log(2);
}, 0);

new Promise(function (resolve) {
    console.log(3);
    resolve(Date.now());
}).then(function () {
    console.log(4);
});
console.log(5);

setTimeout(function () {
    new Promise(function (resolve) {
        console.log(6);
        resolve(Date.now());
    }).then(function () {
        console.log(7);
    });
}, 0);

四

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

五

async function async1() {  // async 函数默认返回一个promise对象
    console.log('2');
    await async2();        // await 后面的代码相当于then()的回调函数
    console.log('6')
}
async function async2() {
    console.log('3')
}
console.log('1');

setTimeout(function () {
    console.log('8')
}, 0);
async1();

new Promise(function (resolve) {
    console.log('4');
    resolve()
}).then(function () {
    console.log('7')
});
console.log('5')

六

setTimeout(function(){
   console.log(1);
},1)
setTimeout(function(){
   console.log(2);
},2)
setTimeout(function(){
   console.log(3);
},3)
requestAnimationFrame(function(){
   console.log(4);
})

七

setTimeout(function(){
    console.log(0);
},0)
console.log(1);
new Promise(function(resolve){
    console.log(2);
    for(var i = 0;i<10;i++){
        i==9&&resolve()
    }
    console.log(3);
}).then(function(){
    console.log(4);
})
console.log(5);

八

async function foo(){
    console.log(1);
    console.log(await Promise.resolve(2));
    console.log(3);
}
async function bar(){
    console.log(4);
    console.log(await 5);
    console.log(6);
}
console.log(7);
foo()
console.log(8);
bar()
console.log(9);

九

Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)

Promise.reject(1)
.then(console.log)
.catch(console.log)
.then(console.log)

十

const promise1 = new Promise((resolve, reject) => {
    console.log('promise1');
    resolve('resolve1')
})
const promise2 = promise1.then(res => {
    console.log(res);
})
console.log('1', promise1);
console.log('2', promise2);

答案：

一：2，4，3，1

二：5，4，7，6，1，3，2

三：1，3，5，4，2，6，7

四：C，E，D，A，B

五：1，2，3，4，5，6，7，8

六：1，2，3，4

七：1，2，3，5，4，0

八：7，1，8，4，9，2，3，5，6

九：1，1，undefined

十：