Updating DOM Synchronously

[Jeffrey Hunter]

Thanks in advance for your attention. The issue I'm having is that a call to document.getElementById("someElement").innerHTML does not appear to be executing synchronously. Here is simplified example code:

document.getElementById("someElement").innerHTML = "Processing...";

var buffer = generateSomeHTML(); /* can be time-intensive */

document.getElementById("someElement").innerHTML = buffer;

When executed in both IE and Firefox, the string "Processing..." does not appear -- it's as if the browser is ignoring the call and going directly to generateSomeHTML() function. Are DOM updates such as this done asynchronously? The reason I ask is because I can put an alert() at line #2 and the string "Processing..." will appear.

[Bear Bibeault]

The display will not update until there is a break in activity. Something like an alert will cause this. A time-intensive operation will not. The display will not update until the operation completes and the function returns.

If it's really important to you -- really important, I'd never do this just for something like this -- you can use a timeout to cause a break between the code where you change the display, and the time-intensive operation executes.

[Jeffrey Hunter]

Thanks, Bear. Haven't visited in a long time but I could always count on you before. I just happened to find a discussion a few minutes ago on this topic, and it came to the same conclusion!

Here is the link to the discussion to anyone interested: Force DOM Update.