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

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.