第一道题:
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
第二道题:
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
微任务:
- process.nextTick(node 独有)
- promise
- MutationObserver
宏任务和微任务的执行顺序:
image.png
网友评论