为什么这段代码在chrome上执行的效果不是预期的呢？


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器</title>
</head>
<body>
    <script>
        window.onload = function(){
            var count = document.getElementById("count");

            //使count的内容自动切换
            //js程序执行的速度是非常快的，所以执行过程看不着

            for(var i=0; i<5; i++){
                count.innerText = i;
                alert(i);
                // console.log(i);
            }
        }
    </script>

    <h1 id="count">1</h1>
</body>
</html>

就是在执行的for循环那段，h1内的文字并没有变化

img

但是在火狐上执行的效果却跟预期的一样

alert()会阻塞进程

alert在for循环里面，h1在for循环外面

这个可能是两者对JSP的兼容问题吧,你管他呢,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器</title>
</head>
<body>
    <script>
        window.onload = function(){
            var count = document.getElementById("count");
            //使count的内容自动切换
            //js程序执行的速度是非常快的，所以执行过程看不着
            for(let i=0; i<5; i++){
                setTimeout(_=>{ 
                    count.innerText = i;
                    alert(i);
                },1)
               
                // console.log(i);
            }
        }
    </script>
    <h1 id="count">1</h1>
</body>
</html>

通过let以及异步代码，可以获得你想要的效果