我如何告诉javascript立即更新DOM

How do I tell javascript to immediately update the DOM?

本文关键字：更新 DOM javascript 何告诉      更新时间：2023-09-26

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

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

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

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

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

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

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

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

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

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

相关文章：