示例一、
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 宏任务:setTimeout
// 微任务:ansync2已完成,7
async function async1() {
console.log(1) // 第二个打印
// 这一步是非常重要的
await async2() // "ansync2已完成"这一步微任务执行完后就把下面的送进微任务队列中
console.log(2) // 这个时候的微任务队列就是7,2了,依次执行,最后执行宏任务:setTimeout
}
async function async2() {
await console.log(3)
// 第三个打印,这个时候的async2已经完成,把"ansync2已完成"放进微任务
// 然后先别管,先去执行同步任务
}
console.log(4) // 第一个打印
setTimeout(function () {
console.log(5) // 进宏任务里了哈
}, 0)
async1();
new Promise(function (resolve) {
console.log(6) // 第四个打印
resolve();
}).then(function () {
console.log(7) // 进微任务里面
})
console.log(8) // 第五个打印,到这里的时候同步代码就已经执行完了,现在回去看看微任务队列
// 现在的微任务队列是这样的:ansync2已完成,7;那就执行"ansync2已完成"这一步。
// 打印顺序答案:4,1,3,6,8,7,2,5
</script>
</body>
</html>
示例二、
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 宏任务:setTimeout
// 微任务:4,6,8,asy2已完成,2
async function asy1() {
console.log(1); // 第一个打印
await asy2(); // asy2还没完成,所以先去完成同步代码
console.log(2); // asy2完成后把这个推进微队列中 第七个打印
}
asy2 = async () => {
await (async () => {
await (() => {
console.log(3); // 第二个打印
})(); // 这里也是立即执行
console.log(4); // 上面的await完成后就把这个送进了微任务 第四个打印
})(); // 这里立即执行
console.log(8); // 放进微任务 第六个打印
};
asy3 = async () => {
Promise.resolve().then(() => {
console.log(6); // 第五个打印
})
}
asy1()
console.log(7); // 第三个打印
asy3()
// 打印顺序答案:1,3,7,4,6,8,2
</script>
</body>
</html>