Question

我正在尝试在javascript中调用耗时的函数之前向用户加载“加载”消息。

HTML：

<p id='foo'>Foo</p>

使用Javascript：

var foo = document.getElementById('foo');

function tellViewerLoading() {
  // Tell the user that loading is occuring.
  foo.innerHTML = 'loading...';   
}

function someActionThatTakesALongTime() {
  // Do some action that takes a long time.
  var i = 0;
  while(i < 100000) {i++; console.log(i);};
}

function domUpdateDelayExperiment() {
  tellViewerLoading();
  someActionThatTakesALongTime();
}

domUpdateDelayExperiment();

JSFiddle：http://jsfiddle.net/johnhoffman/xDRVF/

我想要发生的是在调用tellViewerLoading()后立即更新DOM。

相反，发生的事情是在someActionThatTakesALongTime()完成运行后似乎更新了DOM。此时，显示加载消息是没用的。

如何在调用tellViewerLoading()后告诉javascript立即更新DOM？

Answer 1

使用setTimeout生成长时间运行函数：

function domUpdateDelayExperiment() {
  tellViewerLoading();
  setTimeout(someActionThatTakesALongTime, 50);
}

说明：tellViewerLoading()函数更新了DOM，但在domUpdateDelayExperiment()返回之前，浏览器不会反映屏幕上的更改。通过setTimeout（）延迟someActionThatTakesALongTime，我们让浏览器反映DOM的变化。超时是任意的，但在某些浏览器中，其最小值可能很重要。 50毫秒的值是公平的。

Answer 2

实际上，如果您使用调试器单步执行代码，您将看到在调用下一个函数之前更改了加载文本。

您的浏览器只是挂在长函数调用上，因此无法更改显示的文本。

如果您希望浏览器在进入下一个功能之前有足够的时间更改显示，则使用短暂超时会有所帮助。

如何告诉javascript立即更新DOM？

2 个答案: