一道有关 Javascript 事件循环的题目

最新推荐文章于 2024-05-23 18:18:56 发布

林_xi

最新推荐文章于 2024-05-23 18:18:56 发布

阅读量489

点赞数

分类专栏：前端知识

本文链接：https://blog.csdn.net/u011423258/article/details/104319615

版权

前端知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前几天在B站看到个视频，讲解了事件循环，里面的有一道事件循环的题目，估计很多人不怎么细心想的话会做错。

题目内容：有如下代码块，请写出点击了 button 后，控制台的输出内容

<!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>
    <button id="btn">click</button>
    <script>
        var oBtn = document.getElementById('btn')

        oBtn.addEventListener('click', function () {
            Promise.resolve().then(() => console.log('微任务 1'))
            console.log('listener1')
        })

        oBtn.addEventListener('click', function () {
            Promise.resolve().then(() => console.log('微任务 2'))
            console.log('listener2')
        })

    </script>
</body>
</html>

答案：

我个人的理解，先输出 listener1 和 微任务1，后再输出 listener2 和 微任务2，是因为js是单线程执行的，所以事件肯定也是从第一个 EventListener 开始执行的。那么在执行第一个的时候，由于 promise 是走微任务的，所以先输出 listener1，接下来肯定有挺多人会认为是要执行 Listener2 中的代码了，但其实不是，在 javascript 的堆栈中，监听 click 的事件结束了，在目前的微任务队列中，里面只有一个 Listener1 的 Promise，由于第2个 EventListener 还暂时没执行到，所以就会轮到 Promise 的这个微任务了。以此类推，EventListener2 中的打印也是如此。

但是如果题目改成如下，控制台将输出什么呢？

<!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>
    <button id="btn">click</button>
    <script>
        var oBtn = document.getElementById('btn')

        oBtn.addEventListener('click', function () {
            Promise.resolve().then(() => console.log('微任务 1'))
            console.log('listener1')
        })

        oBtn.addEventListener('click', function () {
            Promise.resolve().then(() => console.log('微任务 2'))
            console.log('listener2')
        })
        
        oBtn.click()

    </script>
</body>
</html>

答案：

那这个输出怎么是 listener1 和 listener2 先输出后再输出 微任务1 和 微任务2 啊？在 javascript 的堆栈中，click() 运行，然后依次执行 listener1 和 listener2 的事件，也就是先打印 listener1，将微任务1 推入微任务队列中，然后打印 listener2，将微任务2 推入微任务队列中，此时微任务队列中，有两个微任务，并且 click 事件执行完毕，javascript 堆栈中的 click() 已经执行结束，接下来就是执行按顺序执行微任务队列中的了，故有以上输出。针对题目二，我手工画了个简单的草图，大概表示一下过程：

林_xi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一道有关 Javascript 事件循环的题目

在B站看到个视频，讲解了事件循环，里面的题目估计很多人不怎么细心想的话会做错题目内容：有如下代码块，请写出点击了 button 后，控制台的输出内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c...
复制链接

扫一扫

专栏目录