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

示例一、

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>
相关推荐
Apifox3 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞6 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行6 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758107 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周10 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队28 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js