Question

我有一个循环，应该更新进度条作为循环增量，但它只是在循环实际完成后一次着色进度条。我记得有一个类似的问题，如果我使用alert语句，着色会起作用，所以我认为它与线程的并发性有关。为了解决我的旧问题，我使用了setTimeout。但是，这仍然没有让我的进度条实时着色。

这就是我正在做的事情：

for (var i = 0; i < numOfRows; i++) {
    setTimeout('ColourBlock(' + i + ')', 0);

    // do_work
}

function ColourBlock (position){
    document.getElementById("block" + position).style.backgroundColor = "orange";
}

有人告诉我这可能是由于JavaScript优化？有人可以帮忙吗？

Answer 1

这不是关于线程的。这是因为当代码快速生成DOM或样式更改时，浏览器不会尝试更新每个代码之间的视图。相反，它等待事情冷静下来然后重新粉刷。

如果您按照描述的方式编码了每个更改的非零超时值（例如，100毫秒），那么您会看到它发生。正如你所写的那样，在零毫秒超时的情况下，所有的更新都将在很短的时间内发生 - 可能在一毫秒之内，除非你有数千个这样的块。

（请注意，您的示例代码不会给每个更改的超时100;您必须将它们逐渐增加到更远的位置，为每个更改添加100个。或者您可以使用间隔计时器并取消在最后一次更新之后。）

Answer 2

浏览器在执行javascript代码时不会更新UI。当代码完成并且控制权返回到UI时，更新将立即发生。

这也是它处理警报的原因 - 当警报启动时，javascript执行被暂停并且控制权被返回到UI。

Answer 3

您需要使用闭包，以便在致电时ColourBlock使用i时调用的值（在下面的代码中分配给currentPosition）。尝试将for循环更改为：

for (var i = 0; i < numofrows; i++) {
    (function() {
        var currentPosition = i;
        setTimeout(function() {
            ColourBlock(currentPosition);
        }, 500);
    })();

Answer 4

尝试增加setTimeout期间的时间。当我遇到类似的问题时，我们使用了200毫秒的间隙并且有效。

Javascript进度条没有“动态”更新，但一次性进程一次完成？

4 个答案: