Javascript进度条未更新'；在飞行中'；，但一次完成所有的过程？

我有一个循环，它应该更新一个进度条作为循环 增量，但它只是在循环实际完成后一次性为进度条着色。我记得有一个类似的问题，如果我使用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";
}

for（变量i=0；i

---

有人告诉我这可能是因为JavaScript优化？有人能帮忙吗？

这与线程无关。这是关于这样一个事实：当代码进行一系列快速的DOM或样式更改时，浏览器不会尝试在每个更改之间更新视图。相反，它会等待事情平静下来，然后重新绘制

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

---

（请注意，您的示例代码不会给每个更改指定100作为超时；您必须将它们以增量方式放到更远的将来，为每个更改再添加100。或者您可以使用间隔计时器，并在上次更新后取消它。）

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

---

这也是它处理警报的原因——当警报弹出时，javascript执行被暂停，控制权被返回到UI。

尝试增加设置超时时间。当我遇到类似的问题时，我们使用了200毫秒的间隔，它工作了。

您需要使用一个闭包，以便在调用

colorblock

时使用调用时的

I

值（在下面的代码中，该值被分配给

currentPosition

）。尝试将

for

循环更改为类似以下内容：

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

for（变量i=0；i

这与快速更改或优化无关，而与javascript代码和UI在同一线程上运行这一事实有关；因此，当js代码执行时，UI无法更新。增加超时也不会有任何帮助，除非您将超时增加到函数执行时间之外，此时您已经完成并且没有真正完成需要更多的进度条。@Luc增加超时肯定会有帮助。对所有这些超时值使用零将导致计时器事件在事件循环完成后立即触发。更大的超时值肯定会让浏览器有时间刷新视图。如中所示，即使是1毫秒的延迟也会允许对于可视动画。谢谢你，你是对的。但是，问题是我现在必须“破解”应该是什么时间，这应该是什么时候通知客户这个过程将需要多长时间。我可以强制我的进度条花10秒完成，这个过程可能在4秒后完成：在你的JSFIDLE示例中，你正在使用setInterval。每次setInterval中的函数完成执行时，UI都会接管并更新自身。如果将间隔更改为0，则示例仍然有效，表明它与允许浏览器有时间更新无关。js代码完成执行后，浏览器会更新。那么，您如何获得有关实际rea的信息首先是l世界的“进步”？