我有一个网页，在加载过程中会进行大量计算。
我想在页面“思考”时显示一个旋转栏，以便最终用户知道延迟是预期的。
我要执行此操作的方法是显示一个旋转轮的 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 更新(即更改 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% 的情况下这可能不会成为问题。
关于脚本运行时 JavaScript 页面更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43643788/