Javascript不立即更新DOM

我的问题与本文中描述的问题非常相似：

我有一个脚本，可以调用一些服务，并处理一些操作。 我试图创建一个progressbar，向最终用户指示脚本执行的当前状态。我计算流程（#currentaction/#totalactions）以指示进度，并在每次使用此新值处理操作时更新DOM

但是，DOM仅在所有操作完成时更新。 我在函数中放置了一个setTimeout，由于某种原因DOM仍然没有一步一步地更新，它只是在执行整个jscript时更新

下面是我的JScript的一个示例

    var pos = RetrievePos();
_TOTALCOUNT = (pos.length);

for(var i = 0; i < pos.length; i++) {
    var cpos = pos[i];
    CreateObject(cpos, id);
}

function CreateObject(cpos, id)
{
    setTimeout(function() {
        //do work here, set SUCCESS OR ERROR BASED ON OUTCOME
        ...

        //update gui here
        var scale = parseFloat(_SUCCESS + _ERRORS) / parseFloat(_TOTALCOUNT);
        var totWidth = $("#loaderbar").width();
        $("#progress").width(parseInt(Math.floor(totWidth * scale)));
    }, 500);
}

var pos=RetrievePos（）；
_TOTALCOUNT=（位置长度）；
对于（变量i=0；i

我尝试过在整个CreateObject调用中设置setTimeout函数，仅在DOM调用中设置，但似乎没有任何效果

我可能错过了一些非常明显的东西，但我真的看不到

有什么想法吗

---

谢谢，

我想您在CreateObject中所做的不仅仅是设置超时？ 如果不是，最好从循环中调用setTimeout

我怀疑您正在使用JQuery。如果是，请尝试使用动画

$（'#progress'）。动画（{width:parseInt（Math.floor（totWidth*scale））}，'slow'）

---

因为这将调用它自己的更新代码，所以它可能会解决这个问题。如果没有完整的代码，我无法确切说出这里的问题是什么。我也是PrototypeAPI的负责人，而不是JQuery的负责人。

@gazhay:您可能有一点，使用JQuery的.animate函数可以绕过这个问题

然而，我找到了解决这个问题的办法。我修改了JScript，不再使用for循环，而是使用递归函数。在FOR循环完全终止之前，DOM似乎不会得到更新。。。有人能证实这一点吗

我已经用以下脚本对此进行了测试：

这不起作用：

for(var i = 0; i < 1000; i ++)
{
    setTimeout(function() {document.getElementById('test').innerHTML =  "" + i;}, 20);
}

for（变量i=0；i<1000；i++）
{
setTimeout（函数（）{document.getElementById（'test'）.innerHTML=“+i；}，20）；
}

虽然这确实有效：

function dostuff(i)
{
    document.getElementById("test").innerHTML = i;
    if(i<1000)
        setTimeout(function(){ dostuff(++i);}, 20);
}

var i = 0;
dostuff(i);

函数dostuff（i）
{
document.getElementById（“test”）.innerHTML=i；
如果（i代码不能正常工作的原因是，
CreateObject
函数将被快速连续调用多次，每次都会立即提示500毫秒后要执行的操作。
setTimeout（）
不会暂停执行，它只会将函数排队等待在将来某个时间调用

因此，基本上，500毫秒内不会发生任何事情，然后所有更新都会立即发生（当然，技术上是按顺序进行的）

请尝试将每个函数调用以500毫秒的间隔排队

for (var i = 0; i < pos.length; i++) {
    setTimeout((function(i) {
        return function() {
            var cpos = pos[i];
            CreateObject(cpos, id);
        }
    })(i), i * 500);
}

for（变量i=0；i

并从
CreateObject
中删除
setTimeout
调用

请注意，使用自动调用的函数可以确保setTimeout调用中的变量
i
正确绑定到当前值
i
，而不是其最终值。
1.哪里定义了
\u SUCCESS
/
\u ERRORS
？您至少应该正在初始化。2.您的
setTimeout
是否专业分块访问“工作负载”（因此您将有多个UI更新调用？）如果您的DOM更改代码在setTimeout块中，那么您可以合理地预期DOM将在将来更改500毫秒，而不是现在。成功和错误是全局定义的变量，我没有在这里包括所有代码，这只是一个片段。代码执行得非常精细，我已经反复调试了它。唯一的问题是只有当所有代码都被执行时，DOM才会被更新，与我使用的设置超时无关。整个过程大约需要20秒才能完成，progressbar保持在0，直到20秒过去，然后移动到100%…不，DOM将在
for
循环中非常愉快地更新。有关更多详细信息，请参阅我的答案，但这是必不可少的很明显，从循环开始大约500毫秒内，你触发了循环的每个过程，而你的递归版本在上一个过程完成之前不会排队等待下一个过程。你说得对，我也尝试了你的解决方案，效果也很好！我看到上面已经讨论了这一点。作为旁白，它可能会更合理的做法是使用setInterval或JQuery和prototype替代品的循环更新程序。