为什么更新进度条时浏览器挂起

Why Does The Browser Hang When Updating The Progress Bar?

本文关键字：浏览器 挂起 更新 为什么      更新时间：2023-09-26

>问题：我有一些代码正在运行，它需要定期更新进度条。它似乎工作正常，直到我到达更新发生在 for 循环中的部分代码。

挂断后，进度条将更新为 for 循环后应有的状态。例如，在此代码中：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#Button1').click(function(){
        $("#Progressbar").val(0); //reset to 0
        for(var i = 0; i < 100000; i++){
            $("#Progressbar").val(i/1000);
            //if(i === 50000){
            //  alert("Half Way There");
            //}
        }
    });
});
</script>
</head>
<body>
    <button id="Button1">Simulate Progress</button>
    <progress id="Progressbar" value="0" max="100"></progress>
</body>
</html>

按下按钮后，我的浏览器（Firefox）将挂起，几秒钟后显示100%完成进度条。如果取消注释代码，则在警报显示时，您将看到进度条已完成 50%。

为什么它像那样挂起并且不产生流畅的进度更新？我尝试使用Web Workers，但我看到了几乎相同的响应。

JavaScript 在单个线程中运行。你让它忙于循环，以至于它没有时间去重新绘制页面。

请改用带有 setTimeout 或 setInterval 的迭代器。

相关文章：