脚本运行时JavaScript页面更新

我有一个网页，该网页可以作为加载的一部分进行大量计算。

我想在页面"思考"时显示旋转栏，以便最终用户知道延迟是可以预期的。

我要执行此操作的方法是显示一个旋转轮的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"类型的呼叫？(

问题似乎是在处理功能启动之前，DOM更新(即更改DIVS上的显示属性(未完成。一个选项是使用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％的情况下，这可能不是一个问题。

我想您可以利用settimeout(https://developer.mozilla.org/en-us/docs/web/web/api/windoworworkerglworkerglobalscope/settime(之类的功能。

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

我认为发生了什么事是您几乎用该循环崩溃了浏览器。我可能误解了您的问题的哪些部分只是出于演示目的。

相关内容

最新更新

热门标签：