一次宏任务执行完后（包括其中的微任务），遇到的问题

image.png image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            padding: 30px;
            background-color: aqua;

        }

        .inner {
            height: 100px;
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="outer">outer
        <div class="inner">inner</div>
    </div>
</body>
<script>
    var outer = document.querySelector('.outer');
    var inner = document.querySelector('.inner');
    new MutationObserver(function () {
        console.log('mutate');
    }).observe(outer, {
        attributes: true
    });
    function onClick(i) {
        console.log('click'+i);
        setTimeout(function () {
            console.log('timeout'+i);
        }, 0);

        Promise.resolve().then(function () {
            outer.setAttribute('data-random'+i, Math.random());
            console.log('promise'+i);
        });

        outer.setAttribute('data-random'+i, Math.random());
    }

    // …which we'll attach to both elements
    inner.addEventListener('click', ()=>{
        onClick(1)
    });
    outer.addEventListener('click', ()=>{
        onClick(2)
    });
    inner.click()
</script>

</html>

复制代码

执行结果

image.png

按照之前一次宏任务(包括宏任务里的微任务)完后渲染一次的说法，应该是只输出一次mutate的。现在输出两次，不能理解。

image.png


作者：用户8008113304919
链接：https://juejin.cn/post/6956893409776762910
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

MutationObserver这个函数会把dom变动记录放到一个数组里进行处理，也就是说，click(1)和click(2)都会触发outer.setAttribute('data-random'+i, Math.random());，也就是触发MutationObserver，所以才会将mutate打印二次。

你看那个地方调用MutationObserver这个函数了

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y