正在运行脚本时进行JavaScript页面更新

我有一个网页，在加载过程中执行大量计算。正在运行脚本时进行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，但在其他几种语言。经验丰富的职业是否有一个“调用DoEvents”呼叫类型的我可以像在Visual Basic或PowerShell的？）

来源

2017-04-26 Jean-Claude DeMars

问题似乎是在处理函数启动之前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-26 21:09:22 cjg

所以我不得不延长应用程序的整体性能，以显示用户该应用程序正在工作..大声笑 - 谢谢，这是行不通的。 –

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

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

我觉得发生了什么事是你几乎崩溃与循环浏览器。出于演示目的，我可能误解了您的问题的哪些部分。

来源

2017-04-26 21:00:46 piisexactly3

循环只是一个简单的代码snippit。这个解决方案的问题是延迟更新值，但是一旦更新值，就不会给浏览器更新屏幕的空闲周期。延迟主进程允许“工作”代码部分运行，然后延迟允许屏幕更新（从GUI编程日起，穷人的'DoEvents'）。 –

正在运行脚本时进行JavaScript页面更新

回答

相关问题