Question

我有一个网页，在加载时会进行大量计算。

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

我要这样做的方法是显示一个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”类型的调用吗？）

Answer 1

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

＆＃13;

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);
}

＆＃13;

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

这种方法的问题在于setTimeout的适当延迟会因机器/用户/浏览器/运行而异。但是，我的猜测是，在99％的情况下，这可能不是问题。

Answer 2

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

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

我认为发生了什么事情，你几乎要用这个循环来破坏浏览器。我可能误解了你的问题的哪些部分仅用于演示目的。

脚本运行时更新JavaScript页面

2 个答案: