js大量计算导致dom被阻塞

2024年4月5日 148次阅读 来源: ggwfnyqqqfoa

不知道有没有人遇到过这种为题，如下代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .loading {
                position: absolute;
                width: 100px;
                height: 100px;
                left: 50%;
                margin-left: -50px;
                top: 100px;
                border: 10px solid #DDDDDD;
                border-radius: 50%;
                border-top: 10px solid #009fFF;
                box-sizing: border-box;
                -webkit-animation: ani 2s ease infinite;
            }
            @-webkit-keyframes ani{
                0%{-webkit-transform: rotate(0);}
                100%{-webkit-transform: rotate(360deg);}
            }
        </style>
    </head>
    <body>
        <button onclick="start();">start</button>
        <div class="loading" style="display: none;"></div>
    </body>
    <script>
        var ld = document.querySelector(".loading");    // loading 的 div
        function start(){
            ld.style.display = "block";        // 显示loading的div
            
            console.log("开始大量数据计算！");        // 下面的循环大约会执行 3-4秒
            var temp = 1;
            for (var i = 0 ; i < 200000000 ; i++) {
                temp = Math.random() * Math.random() * Math.random();
            }
            
            ld.style.display = "none";        // 取消loading
        }
    </script>
</html>

就是在大量数据操作的时候 开启一个 loading动画， 结果这个程序出问题了，始终没有显示loading，最后发现是在计算的时候 dom的没有被执行。

于是乎修改一下，

<script>
        var ld = document.querySelector(".loading");    // loading 的 div
        function start(){
            ld.style.display = "block";        // 显示loading的div
            
            setTimeout(function(){
                console.log("开始大量数据计算！");        // 下面的循环大约会执行 3-4秒
                var temp = 1;
                for (var i = 0 ; i < 200000000 ; i++) {
                    temp = Math.random() * Math.random() * Math.random();
                }
                
                ld.style.display = "none";        // 取消loading
            });
        }
    </script>

然后就正常了。。。。。 问题的根本原因还在研究中

    原文作者：ggwfnyqqqfoa
    原文地址: https://segmentfault.com/a/1190000007747173
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞