如何在运行激烈的 Javascript 时更新 DOM？答案

【问题标题】：How can I update the DOM while running intense Javascript?如何在运行激烈的 Javascript 时更新 DOM？
【发布时间】：2013-02-28 02:52:01
【问题描述】：

我正在编写 Javascript，它为项目计数到一定数量。这个数字可能在 100,000 左右，完成处理大约需要 10-15 秒。我希望脚本在用户调用页面后立即运行，并且在脚本完成时进行重定向。是否可以在 DOM 运行时暂停 10 毫秒以更新 DOM 以提供诸如“仍在工作”之类的反馈？

我想避免使用 jQuery 和 web-workers 在这种情况下不是一个选项。我意识到这不是一个真实世界的应用程序！

编辑：添加了一些代码作为示例：

在头脑中

function myCounter (target) {
    var t = target;
    var count = 0;
    while (t != count){
        if (t == count) {
        window.location.replace("http://example.com"); // redirect
        }
    count++;
    }
}

在体内

<script>myCounter(100000);</script>

【问题讨论】：

setTimeout 或 setInterval
javascript 是单线程的。如果没有网络工作者，一次可能会发生一件事。

标签： javascript javascript-events

【解决方案1】：

在大多数浏览器中，JavaScript 和 UI 在同一个线程中运行。您可以使用setTimeout（或setInterval）将线程返回给浏览器。

var myNumber = 0;
updateNumber();

function updateNumber(){
    // do heavy work for great good, ideally divided into smaller chunks

    document.getElementById('updateDiv').innerHTML = 'still working, up to ' + myNumber;

    if(myNumber < limit) {
      setTimeout(updateNumber, 20);
    }
}

有关一般流程的更多详细信息，此答案值得一读：https://stackoverflow.com/a/4575011/194940

【讨论】：

我发现最好安排“做工作”的时间来限制时间（比如 50 毫秒），然后让出一段时间（比如 30 毫秒）。时间会因浏览器/环境而异，但 0 毫秒（实际上大约 5 毫秒到 15 毫秒）超时会使某些浏览器中的事情非常不稳定。
@pst 是的，这可能是真的。我把它改成了 20 毫秒。
“在大多数浏览器中，JavaScript 和 UI 在同一个线程中运行”现在你已经很好奇了，哪些浏览器的 UI 和 JS 不是在同一个线程中运行的？
这就是我一直在尝试做的事情，但我无法让它发挥作用。我在上面添加了我的代码格式化方式的示例！感谢您的帮助
啊，我想通了！谢谢:)