JavaScript 没有立即更新 DOM

Question

我的问题与这篇文章中描述的问题非常相似：

Javascript 进度条不会“即时”更新，而是在进程完成后立即更新？

我有一个调用一些服务并处理一些操作的脚本。 我正在尝试创建一个进度条，向最终用户指示脚本执行的当前状态。我计算进程 (#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);
}

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

我可能在这里遗漏了一些非常明显的东西，但我真的没有看到它。

有什么想法吗？

谢谢，

Answer 1

您的代码无法正常工作的原因是 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);
}

并从 CreateObject 中删除 setTimeout 调用。

请注意，使用自动调用函数可确保 setTimeout 调用中的变量 i 正确绑定到 i 的当前值，而不是它的最终值。

Answer 2

我认为您所做的不仅仅是 CreateObject 中的 setTimeout ？
如果不是，最好从循环中调用 setTimeout。

我怀疑你正在使用 JQuery。如果是这样，请尝试使用 animate

$('#progress').animate({width: parseInt(Math.floor(totWidth * scale)) }, 'slow');

由于这将调用它自己的更新代码，因此它可能会解决问题。没有您的完整代码，我无法准确说出这里的问题是什么。我也是 PrototypeAPI 负责人，而不是 JQuery 负责人。

Answer 3

@gazhay：您可能认为使用 jQuery 的 .animate 函数可以绕过这个问题。

不过，我找到了解决这个问题的办法。我修改了 JScript，不再使用 for 循环，而是使用递归函数。显然，直到 FOR 循环完全终止后，DOM 才会更新......任何人都可以确认这一点吗？

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

这不起作用：

for(var i = 0; i < 1000; i ++)
{
    setTimeout(function() {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);