javascript 函数停止浏览器的选项卡

Question

我在处理 Javascript function 时遇到问题在下面的代码中是一个简单的例子当我单击该代码中的按钮时，Javascript function 开始处理该函数必须在处理过程中更改进度条的值，当您尝试输入时显示文本区域，页面停止，几秒钟后浏览器给出一条消息

我打算确保函数显示进度条的值，我想在函数加载时执行一些任务

       function f() {
            var i;
            for (i = 0; i < 100000; i++) {
                document.getElementById("p").innerHTML += i;
                document.getElementById("r").value += 1;
            }
        }

<html>

<body>
    <progress max="100000" value="0" id="r"></progress>
    <button onclick="f()">click here</button>
    <textarea placeholder="type here ..."></textarea>
    <p id="p"></p>

</body>

</html>

Answer 1

问题是 Javascript 是单线程的。浏览器完全专注于计算，没有时间重绘。为了解决这个问题，我们需要给浏览器一些时间来重新组合：

       function f() {
            var i = 0;
            var intervalID = setInterval(function() {
                document.getElementById("p").innerHTML += i;
                document.getElementById("r").value += 1;
                if (++i === 100000) clearInterval(intervalID);
            }, 50);
        }

<html>

<body>
    <progress max="100000" value="0" id="r"></progress>
    <button onclick="f()">click here</button>
    <textarea placeholder="type here ..."></textarea>
    <p id="p"></p>

</body>

</html>

javascript 函数停止浏览器的选项卡

javascript function stops browser's tab

javascript

processing

function

progress-bar