réponse différente IE8 et FF getElementById ()

Question

J'ai une fonction qui effectue les opérations suivantes

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

    // do stuff

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

Dans FF la div affiche « show attente », faire les autres choses pendant 4 secondes et alors « spectacle terminé »

Dans IE, il ne montrera que « spectacle terminé ». Si je mets une alerte () avant ou après le « faire des choses », il affichera « show attente ».

Que puis-je faire pour le résoudre, je sais que je peux diviser la fonction, toutes les autres solutions?

Answer 1

L'explication de Richard Read pourquoi il ne fonctionne pas. En ce qui concerne une solution, un hack rapide:

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

    setTimeout(function(){
        // do stuff

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

La raison pour laquelle cela fonctionne est que les horaires de setTimeout le code à exécuter plus tard, permettant ainsi au navigateur de quitter le script mode d'exécution « faire des choses » et entrez le mode de rendu DOM afin que le texte de "show wait" peut être tirée sur l'écran.

Answer 2

IE ne montre pas les mises à jour jusqu'à ce que vous retournez le fil de contrôle du navigateur. Un appel à alerter le fera (votre script attend une action de l'utilisateur).

Soit ne comptez pas sur les modifications de l'interface utilisateur visible pendant que vous avez le fil d'exécution, ou faire quelque chose comme l'utilisation d'une minuterie pour poursuivre la deuxième partie de votre script après (brièvement) en retournant le fil d'exécution.