如何告诉javascript立即更新DOM？

我试图在javascript中调用时间密集型函数之前，向用户加载“加载”消息

HTML:

foo
​

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();

var foo=document.getElementById（'foo'）；
函数tellViewerLoading（）{
//告诉用户正在加载。
foo.innerHTML='loading…'；
}
函数someActionthatakesalongtime（）{
//做一些需要很长时间的动作。
var i=0；
而（i<100000）{i++；console.log（i）；}；
}
函数domUpdateLayeExperiment（）{
tellViewerLoading（）；
一些需要花费时间（）的操作；
}
domUpdatedLayexperiment（）；

JSFiddle：

我希望在调用

tellviewerload（）

后立即更新DOM

相反，发生的情况是，DOM似乎是在

someActionThakesalongTime（）

完成运行后更新的。此时，显示加载消息是无用的

---

调用

tellviewerload（）

后，如何告诉javascript立即更新DOM？

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

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

---

说明：

tellViewerLoading（）

函数更新DOM，但浏览器不会在屏幕上反映更改，直到

domUpdatedLayeExperiment（）

返回。通过setTimeout（）延迟

someActionsalongtime

，我们可以让浏览器反映DOM更改。超时是任意的，但其最小值在某些浏览器中可能很重要。50毫秒的值就足够了。

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

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

---

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

这只是一个例子，但我注意到IE有时确实需要最短的时间。什么？您的解释完全错误，它确实反映了

domUpdateLayeExperiment（）

返回之前的更改。@FlorianMargaine我是指屏幕上的更改。我想这可能取决于浏览器，但我已经多次看到阻止Javascript不会让浏览器更新屏幕上的更改。你调用了错误的函数。必须调用tellViewerLoading函数：）对此不确定。。。tellViewerLoading函数很短，可以立即执行，为什么要延迟它？相反，我认为我们必须给予它优先权，并推迟长时间运行的功能。

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