Question

我有一个长时间运行的Javascript操作，我需要向用户显示“正在加载...”消息。我有一个div（standbyDiv），显示加载消息，除了运行此操作时，它始终是隐藏的。以下是我试图实现这个目标的方法

document.getElementById('standbyDiv').style.display = "";
LongRunningJavascriptLibraryCall();    // runs for about 10 seconds
document.getElementById('standbyDiv').style.display = "none";

在Firefox中，这可以按预期工作。在Google Chrome中，第1行中的显示设置为on不会显示。无论出于何种原因，Chrome都不会在第1行之后刷新显示。而是等待第2行和第3行在应用样式之前运行，而standbyDiv在操作期间从不显示。如果我单步浏览Chrome调试器中的行，它就会按预期工作。

有什么想法吗？

Google Chrome版本32.0.1700.72

Answer 1

操作完成后，您需要使用回调或承诺来恢复样式：

function hide() {
  elem.style.display = 'none';
}

LongRunningJavascriptLibraryCall(hide);

function LongRunningJavascriptLibraryCall(callback) {
  //...
  //when the server call comes back:
  success : function() { //whatever the library uses for a callback
    callback();
  }
}

旧答案（用于同步代码）

将样式设置为“阻止”而不是任何内容。

document.getElementById('standbyDiv').style.display = "block";

强制对元素进行重新绘制：

document.getElementById('standbyDiv').style.display = "block";
var x = document.getElementById('standbyDiv').offsetHeight;

只是关于良好做法的说明 - 您可以缓存元素参考以供重复使用：

var elem = document.getElementById('standbyDiv');

elem.style.display = "";
var x = elem.offsetHeight;
LongRunningJavascriptLibraryCall();
elem.style.display = "none";

Google Chrome中的样式更新问题

1 个答案:

旧答案（用于同步代码）