async和await的事件循环机制示例

Niucode

已于 2024-04-24 17:15:07 修改

阅读量309

点赞数 3

分类专栏： es6 文章标签： javascript 前端 vue.js

于 2024-04-16 16:02:46 首次发布

本文链接：https://blog.youkuaiyun.com/Niucode/article/details/137827911

版权

es6 专栏收录该内容

7 篇文章

订阅专栏

本文通过两个HTML示例，详细解释了JavaScript中的宏任务（如setTimeout）与微任务（如Promise和async/await）的执行顺序，展示了异步编程中的关键概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例一、

<!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已完成”这一步微任务执行完后就把下面的送进微任务队列中
            // 要是没有“ansync2已完成”这一步，2就直接被推进微任务队列
            // 最终打印顺序答案会变为：4，1，3，6，8，2，7，5（7和2的位置互换一下）
            console.log(2) // 这个时候的微任务队列就是7，2了，依次执行，最后执行宏任务：setTimeout
        }

        async function async2() {
            // 要是这里没有await就不会有把“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>

示例二、

<!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>