How do I tell javascript to immediately update the DOM?

Question

I am trying to load a 'loading' message to the user before a time-intensive function is called in 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/

What I want to happen is for the DOM to be updated immediately after tellViewerLoading() is called.

Instead, what happens is that the DOM seems to be updated after someActionThatTakesALongTime() finishes running. At that point, it is useless to display a loading message.

How do I tell javascript to immediately update the DOM after tellViewerLoading() is called?

Claudi · Accepted Answer · 2012-08-18T22:15:21.157

11

Spawn the long-time running function with setTimeout:

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

Explanation: the tellViewerLoading() function updates the DOM but the browser won't reflect changes on screen until domUpdateDelayExperiment() returns. By delaying someActionThatTakesALongTime by means of setTimeout() we let the browser to reflect DOM changes. The timeout is arbitrary, but its minimum value may be important in some browsers. A value of 50 ms is fair enough.

edited Aug 18 '12 at 22:15

answered Aug 18 '12 at 22:05

Claudi

5,224
17
30

It was just an example, but I've noticed that IE sometimes *does* require a minimum time amount. – Claudi Aug 18 '12 at 22:10
What? Your explanation is completely wrong, it **does** reflect the changes before `domUpdateDelayExperiment()` returns. – Florian Margaine Aug 18 '12 at 22:11
@FlorianMargaine I mean the changes ON SCREEN. I suppose it may depend on the browser, but I've seen many times that blocking Javascript won't let the browser update the changes on the screen. – Claudi Aug 18 '12 at 22:13
You call the wrong function. tellViewerLoading function have to be called :) – totten Aug 18 '12 at 22:18
Not sure about that... The tellViewerLoading function is short and can be immediately executed, why delaying it? Instead, I think we have to give it priority and defer the long-time running function. – Claudi Aug 18 '12 at 22:19

score 2 · Answer 2 · answered Aug 18 '12 at 22:07

Actually, if you step through your code using a debugger, you will see that the loading text is changed before the next function is called.

Your browser is just hanging at the long function call, so it can't change the displayed text.

Using a short timeout can help if you want your browser to have enough time to change the display before going to the next function.

How do I tell javascript to immediately update the DOM?

2 Answers2

Linked