爱划水de鲸鱼哥～ 2021-09-23 01:24 采纳率: 0%
浏览 51

JS 事件循环 mutate为什么打印在两个promise之间？


<!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>
</head>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
    <script>
        var outer = document.querySelector('#outer');
        var inner = document.querySelector('#inner');

        new MutationObserver(function(a,b){ 
            console.log('mutate');
        }).observe(outer, {attributes: true, });

        function onClick(){
            console.log('click');
            setTimeout(function(){
                console.log('timeout');
            }, 0);
            Promise.resolve().then(function(){
                console.log('promise');
            });
            outer.setAttribute('data-random', Math.random());
        }
        inner.addEventListener('click', onClick);
        outer.addEventListener('click', onClick);
        inner.click();

        //控制台输出顺序
        // click
        // click
        // promise
        // mutate
        // promise
        // timeout
        // timeout
    </script>
</body>
</html>
  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-09-23 09:24
    关注

    MutationObserver，Promise.then是微任务，setTimeout宏任务，微任务和宏任务都是异步执行，主线程执行完（click）后，到微任务，再到宏任务。
    同级别任务按照出现顺序先后执行，所以主线程先执行完inner的onclick事件后冒泡再到outer的click执行，

    这样微任务序列为inner的promise.then,MutationObserver,外部的promise.then
    宏任务就是inner的setTimeout，outer的setTimeout
    有帮助或启发麻烦点个采纳【本回答右上角】，谢谢~~

    评论

报告相同问题？

问题事件

  • 创建了问题 9月23日

悬赏问题

  • ¥15 使用EMD去噪处理RML2016数据集时候的原理
  • ¥15 神经网络预测均方误差很小 但是图像上看着差别太大
  • ¥15 Oracle中如何从clob类型截取特定字符串后面的字符
  • ¥15 想通过pywinauto自动电机应用程序按钮，但是找不到应用程序按钮信息
  • ¥15 如何在炒股软件中，爬到我想看的日k线
  • ¥15 seatunnel 怎么配置Elasticsearch
  • ¥15 PSCAD安装问题 ERROR: Visual Studio 2013, 2015, 2017 or 2019 is not found in the system.
  • ¥15 (标签-MATLAB|关键词-多址)
  • ¥15 关于#MATLAB#的问题，如何解决？（相关搜索：信噪比，系统容量）
  • ¥500 52810做蓝牙接受端