JavaScript 脚本处于运行时页面更新

Question

我有一个网页在加载过程中进行了大量计算。

我想在页面 "thinking" 时显示一个微调栏，以便最终用户知道延迟是可以预料的。

我打算这样做的方法是显示一个 GIF 文件，它是一个纺车，并隐藏我的输出 table。

问题是，一旦函数启动，页面更新似乎会冻结，直到函数完成。因此，最终用户永远不会看到 "In Process" 部分。

我放在一起演示我的问题的示例代码是：

<!DOCTYPE html>
<html>
<body>

<script>
function show(id, value) {
    document.getElementById(id).style.display = value ? 'block' : 'none';
}
function Processing(x)
{
    if (x === true)
    {
        show('page', false);
        show('loading', true);
    }
    else
    {
        show('page', true);
        show('loading', false);
    }
}

function MainProcess()
{
    Processing(true)  // Set to "Show processing..."

    var start = new Date().getTime();  // Sleep a few seconds
    for (var i = 0; i < 5; i++) {
        if ((new Date().getTime() - start) < 3000) { i = 1 }
    }
    Processing(false) // Set to "Show Completed processing..."
}

window.onload = function() {
  show('page', false);
  show('loading', false);
};
</script>

<div id="loading">
    <h1>Processing your request.</h1>
</div>

<div id="page">
    <DIV class="body">
        <h3>Done Processing your request.</h3>
    </DIV>
</div>
<div id="buttons">
    <button onclick="MainProcess();">Start Timer</button>
    <button onclick="Processing(false);">Set to Completed</button>
    <button onclick="Processing(true);">Set to Processing</button>
</body>
</html>

当我运行这个的时候，它会出现三个按钮。

当您点击 "Start Timer" 时，它应该显示处理中几秒钟，然后显示完成。取而代之的是，按钮会改变颜色，并且在计时器完成之前似乎什么都不做，并且显示完成。

（我是 JavaScript 的新手，但在其他几种语言方面经验丰富。是否有我可以像在 Visual Basic 或 Powershell 中那样进行的 "DoEvents" 类型的调用？）

Answer 1

我认为你可以利用像 setTimeout (https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) 这样的函数，比如：

setTimeout(function() {
  Processing(false);
}, 5000);

我认为发生的事情是你几乎用那个循环使浏览器崩溃。我可能误解了你问题的哪些部分只是为了演示目的。

Answer 2

问题似乎是 DOM 更新（即更改 DIV 上的显示属性）在处理函数启动之前没有完成。一种选择是使用 window.setTimeout 延迟处理功能的启动，以允许 DOM 更新完成：

function MainProcess()
{
    Processing(true);  // Set to "Show processing..."

    // Pause for 100 ms before starting time-consuming code to allow dom update to c
    var domUpdateDelay = 100;
    window.setTimeout(function() {

                        var start = new Date().getTime();  // Sleep a few seconds
                        for (var i = 0; i < 5; i++) {
                            if ((new Date().getTime() - start) < 3000) { i = 1 }
                        }

                        Processing(false) // Set to "Show Completed processing..."
                      }, 100);
}

window.setTimeout 接受两个参数：第一个参数是一个在 x 毫秒后运行的函数，其中 x 是第二个参数。

这种方法的问题是 setTimeout 的适当延迟会因 machines/users/browsers/runs 而异。但是，我的猜测是这在 99% 的情况下可能都不是问题。

JavaScript 脚本处于运行时页面更新

JavaScript page update while a script is running

javascript

dom

doevents

JavaScript 脚本处于 运行 时页面更新

JavaScript page update while a script is running

javascript

dom

doevents

JavaScript 脚本处于运行时页面更新