Changer la visibilité ne cache pas immédiatement iFrame

Question

J'ai une page qui sur une certaine action rend un iframe visible et remplit l'iframe avec du HTML (disons par exemple une boîte multi-sélection et un bouton ok).

Le bouton OK de la iframe a la méthode onClick définie un peu comme ceci:

onClick="parent.hideIFrame();parent.processMultiSelectBox();" 

Lorsque l'utilisateur clique sur OK sur le iframe (probablement après avoir joué avec la boîte multi-sélection), je voudrais la iFrame à disparaître immédiatement, puis les valeurs sélectionnées dans la zone de sélection multiple peuvent être traitées. Mais ce n'est pas ce qui se passe. L'iFrame reste visible pendant la durée de fonctionnement de l'autre fonction et ne disparaît qu'une fois la deuxième fonction terminée.

La fonction hideIFrame est assez simple:

function hideIFrame() { 
    frmObj = document.all.iFrameID; 
    if(frmObj) { 
    frmObj.style.visibility = "hidden"; 
    } 
} 

J'ai paraphrasé la fonction ci-dessus pour plus de clarté (supprimé certaines affectations de variables d'indicateurs, etc.)

La deuxième fonction des boucles en fait sur toutes les options l'objet multi-sélection et fait des choses avec elle. Cela prend environ une demi-seconde et seulement après que cela soit fait, mon iFrame disparaît. C'est un peu gênant de le voir s'attarder une demi-seconde quand je clique sur ok. Ma question est de savoir s'il y a moyen de faire disparaître la chose si vite. Parlant dans le jargon «classique C», y a-t-il un «flush» pour que le changement de visibilité se produise immédiatement?

J'ai remarqué que si je mets une "alerte" comme première ligne dans ma deuxième fonction, l'iframe disparaît immédiatement mais maintenant c'est le OK sur la boîte d'alerte qui persiste pendant le temps que prend la deuxième fonction pour finir .

Merci.

EDIT: Sur la base de la réponse de DDaviesBrackett, ce que je fini par faire:

Le onclick dans le iframe changé:

onClick="parent.hideAndProcessMultiSelectBox(parm1, parm2);" 

La fonction hideAndProcessMultiSelectBox a été définie comme:

function hideAndProcessMultiSelectBox(parm1, parm2) { 
    hideIFrame(); 
    setTimeout(function() { processMultiSelectBox(parm1, parm2); }, 0); 
} 

Voila .. aucun délai ..

Answer 1

Vous êtes déjà arrivé à la racine de votre problème; le refusion de document ne se produit pas jusqu'à ce que le thread JS actuel soit terminé (pour ne pas répéter beaucoup de fois lors de l'exécution de JS). Vous devez retourner le contrôle au navigateur avant de faire votre traitement coûteux.

La façon la plus simple pour y parvenir, mais il ne fait pas pour le code évident dans le moindre, est d'appeler processMultiSelectBox dans un setTimeout avec un retard de 0:

onClick="parent.hideIFrame();parent.setTimeout(parent.processMultiSelectBox,0);" 

Si vous avez besoin de passer des paramètres à la chose sur laquelle vous définissez un délai d'expiration, vous avez deux options: définir un délai sur une chaîne qui évalue à Javascript (mauvais, mauvais, très mauvais, horrible) ou définir une fonction anonyme qui appelle celle qui vous intéresse :

onClick="parent.hideIFrame();parent.setTimeout(function(){parent.processMultiSelectBox(foo, bar, 'baz');},0);" 

La réponse de RSolberg peut être alors aidez, bien qu'il y ait une différence entre visibility:hidden et display:none.