2

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

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

我打算这样做的方法是显示一个 GIF 文件，该文件将是一个旋转的轮子，并隐藏将是我的输出的表格。

问题是，一旦函数启动，对页面的更新似乎会冻结，直到函数完成。因此，最终用户永远不会看到“进行中”部分。

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

<!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>

当我运行它时，它会显示三个按钮。

当您点击“开始计时器”时，它应该显示处理几秒钟，然后显示完成。相反，按钮会更改颜色，否则在计时器完成之前似乎什么都不做，并且显示完成。

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

4

2 回答 2

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 的适当延迟会因机器/用户/浏览器/运行而异。但是，我的猜测是，在 99% 的情况下，这可能不会成为问题。

于 2017-04-26T21:09:22.713 回答
0

我认为您可以利用 setTimeout （https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout）之类的功能，例如：

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

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

于 2017-04-26T21:00:46.430 回答