10

我试图在 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。

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

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

4

2 回答 2

8

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

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

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

于 2012-08-18T22:05:43.190 回答
2

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

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

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

于 2012-08-18T22:07:59.437 回答