diffrent response IE-8 and FF getElementById()

Question

i have a function what does the following

function test() {
    document.getElementById("main").innerHTML="show wait";

    // do stuff

    document.getElementById("main").innerHTML="show finished";
}

In FF the div will show "show wait", do the other stuff for 4 seconds and then show "show finished"

In IE it will only show "show finished". If i put an alert() after or before the "do stuff" it will show "show wait".

What can I do to solve it, i know i can split the function, any other solutions?

Answer 1

IE is not showing any updates until you return the thread of control to the browser. A call to alert will do this (your script waits for a user action).

Either don't rely on visible UI changes while you have the thread of execution, or do something like using a timer to continue the second part of your script after (briefly) returning the thread of execution.

Answer 2

Read Richard's explanation for why it doesn't work. As for a solution, a quick hack:

function test() {
    document.getElementById("main").innerHTML="show wait";

    setTimeout(function(){
        // do stuff

        document.getElementById("main").innerHTML="show finished";
    },1)
}

The reason this works is that setTimeout schedules the "do stuff" code to be executed later thereby allowing the browser to exit script execution mode and enter DOM rendering mode so that the "show wait" text can be drawn onto the screen.