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 调用（仅围绕 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);
}

并setTimeout从 中删除呼叫CreateObject。

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