如何告诉 javascript 立即更新 DOM？答案

【问题标题】：How do I tell javascript to immediately update the DOM?如何告诉 javascript 立即更新 DOM？
【发布时间】：2012-08-14 21:23:43
【问题描述】：

我正在尝试在 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？

【问题讨论】：

标签： javascript dom

【解决方案1】：

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

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

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

【讨论】：

这只是一个例子，但我注意到 IE 有时确实需要最短时间。
什么？你的解释完全错误，它确实反映了domUpdateDelayExperiment()返回之前的变化。
@FlorianMargaine 我的意思是屏幕上的变化。我想这可能取决于浏览器，但我多次看到阻止 Javascript 不会让浏览器更新屏幕上的更改。
你调用了错误的函数。必须调用 tellViewerLoading 函数:)
不确定... tellViewerLoading 函数很短，可以立即执行，为什么要延迟呢？相反，我认为我们必须优先考虑它并推迟长时间运行的功能。

【解决方案2】：

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

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

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

【讨论】：