Javascript进度条没有"动态"更新,但一次性进程一次完成？

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。