Question

问题：我有一些代码运行，需要定期更新进度条。它似乎工作正常，直到我得到部分代码，其中更新发生在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，但我看到了几乎相同的响应。

Answer 1

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

使用带有setTimeout或setInterval的迭代器。

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

1 个答案: