javascript - 如何在运行密集的 JavaScript 时更新 DOM？

Question

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

我想避免使用 jQuery，在这种情况下网络 worker 不是一个选项。 我意识到这不是真实世界的应用程序!

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

在头部:

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>

Answer 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