脚本运行时JavaScript页面更新_Javascript_Dom_Doevents

脚本运行时JavaScript页面更新

javascript dom

脚本运行时JavaScript页面更新,javascript,dom,doevents,Javascript,Dom,Doevents,我有一个网页，作为加载的一部分，它做了很多计算我想在页面“思考”时显示一个微调条，以便最终用户知道延迟是可以预期的我要做的是显示一个旋转的GIF文件，并隐藏输出的表格问题是，一旦函数启动，页面更新似乎会冻结，直到函数完成。因此，最终用户从未看到“正在处理”部分我为证明我的问题而编写的示例代码是： <!DOCTYPE html> <html> <body> <script> function show(id, value) { do

我有一个网页，作为加载的一部分，它做了很多计算

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

我要做的是显示一个旋转的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>


功能显示（id、值）{
document.getElementById（id）.style.display=value？'block'：'none'；
}
函数处理（x）
{
如果（x==true）
{
显示（'page'，false）；
显示（“加载”，真实）；
}
其他的
{
显示（'page'，true）；
显示（'加载'，错误）；
}
}
函数MainProcess（）
{
处理（true）//设置为“显示处理…”
var start=new Date（）.getTime（）；//睡眠几秒钟
对于（变量i=0；i<5；i++）{
如果（（new Date（）.getTime（）-start）<3000）{i=1}
}
正在处理（false）//设置为“显示已完成的处理…”
}
window.onload=函数（）{
显示（'page'，false）；
显示（'加载'，错误）；
};
正在处理您的请求。
已完成处理您的请求。
启动计时器
设置为已完成
设置为处理

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

当您点击“启动计时器”时，它应该显示处理几秒钟，然后显示完成。相反，该按钮会改变颜色，否则在计时器完成之前不会执行任何操作，并显示complete（完成）

（我不熟悉JavaScript，但在其他几种语言中是一位经验丰富的专业人士。我可以在Visual Basic或Powershell中调用“DoEvents”类型的调用吗？

我认为您可以利用setTimeout（）之类的函数，比如：

我认为现在的情况是，你几乎用这个循环破坏了浏览器。我可能误解了您的问题的哪些部分只是为了演示。

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

函数MainProcess（）
{
正在处理（true）；//设置为“显示处理…”
//在启动耗时的代码以允许dom更新到c之前暂停100毫秒
var domUpdateDelay=100；
setTimeout（函数（）{
var start=new Date（）.getTime（）；//睡眠几秒钟
对于（变量i=0；i<5；i++）{
如果（（new Date（）.getTime（）-start）<3000）{i=1}
}
正在处理（false）//设置为“显示已完成的处理…”
}, 100);
}

因此我必须为应用程序的整体性能增加延迟，以便向用户显示应用程序正在工作。。哈哈——谢谢你，这确实有效。循环只是一种简单的代码剪贴方式。此解决方案的问题在于它延迟了值的更新，但一旦值更新，浏览器就没有更新屏幕的自由周期。延迟主进程允许“工作”代码部分运行，然后延迟允许屏幕更新（一个穷人在GUI编程时的“DoEvents”）。

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