Editing text using innerText in for loop freezes the browser-CodePudding

I am trying to use an element on page as a progress indicator (in percents). However, when I call innerText inside of for loop, Chrome freezes and does not show the progress. Here is the sample code (just to showcase the issue):

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
    <meta charset="utf-8"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 id="a">Hello!</h1>
</body>
<script type="text/javascript">
    function initTrs(){
        for(var i = 1; i<=100; i  ){
            document.getElementById("a").innerText = i;
            $.ajax({
                url: "https://www.google.com",
                async: false,
                done: function (a) {}
            });
        }
    }
    window.addEventListener("load", () => initTrs());
</script>
</html>

Firefox works with it OK; however, Chrome freezes until for loop is fully done.

Could anyone help me out with this? Thanks!

CodePudding user response：

Here is how I solved it at the end:

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
    <meta charset="utf-8"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 id="a">Hello!</h1>
</body>
<script type="text/javascript">
    function initTrs(){
        for(var i = 1; i<=100; i  ){
            const iter = i;
            setTimeout(() => {
                document.getElementById("a").innerText = iter;
                $.ajax({
                    url: "https://www.google.com",
                    async: false,
                    done: function (a) {}
                });
            });
        }
    }
    window.addEventListener("load", () => initTrs());
</script>
</html>