Ändern der Sichtbarkeit nicht sofort iFrame

Question

Ich habe eine Seite, die auf einer bestimmten Aktion macht einen iframe sichtbar und füllt den iframe mit etwas HTML (sagen Sie zum Beispiel ein Multi-Auswahlfeld und eine Schaltfläche OK).

Die OK-Taste auf der iframe hat das ein bisschen wie folgt definiert onClick Methode:

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

Wenn Benutzer klickt auf dem iframe OK (vermutlich mit der Multi-Select-Box nach dem Spiel), ich mag iFrame verschwindet sofort und dann können die ausgewählten Werte in der Mehrfachauswahlbox verarbeitet werden. Aber das ist nicht was passiert. Der iFrame bleibt während der Ausführung der anderen Funktion sichtbar und verschwindet erst, wenn die zweite Funktion beendet ist.

Die hideIFrame Funktion ist ziemlich einfach:

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

ich die obige Funktion für Klarheit umschrieben habe

Die zweite Funktion Schleifen auf allen Optionen tatsächlich (einige Indikatoren Variablenzuweisungen usw. entfernt) in das Multi-Select-Objekt und macht Sachen damit. Das dauert ungefähr eine halbe Sekunde und erst danach ist mein iFrame verschwunden. Es ist ein wenig störend zu sehen, dass es für eine halbe Sekunde verweilt, wenn ich ok klicke.

Meine Frage ist, ob es einen Weg gibt, wie ich das verdammte Ding schneller verschwinden lassen kann. Sprechen Sie im "klassischen C" -Lingo, gibt es einen "Flush" für die Änderung der Sichtbarkeit, um sofort zu geschehen?

Ich habe bemerkt, dass wenn ich eine "Warnung" als erste Zeile in meiner zweiten Funktion, der iframe sofort verschwindet, aber jetzt ist es die OK in der Alarm-Box, die für die Zeit dauert die zweite Funktion zu beenden .

Danke.

EDIT: Basierend auf DDaviesBrackett Antwort, ist es das, was ich tun endete:

Die Onclick in der iframe geändert:

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

Die hideAndProcessMultiSelectBox Funktion wurde wie folgt definiert:

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

Voila .. keine Verzögerung ..

Answer 1

Sie sind bereits zu der Wurzel Ihres Problems gekommen; Das Reflow von Dokumenten passiert erst, wenn der aktuelle JS-Thread fertig ist (um nicht mehrmals während der JS-Ausführung neu zu streichen). Sie müssen die Kontrolle an den Browser zurückgeben, bevor Sie Ihre teure Verarbeitung vornehmen.

Der einfachste Weg, das zu erreichen, obwohl es für offensichtlich Code im Geringsten nicht machen, ist mit einer Verzögerung von 0 processMultiSelectBox in einem setTimeout nennen:

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

Wenn Sie Parameter übergeben müssen Für die Sache, für die Sie eine Zeitüberschreitung einstellen, haben Sie zwei Möglichkeiten: Legen Sie eine Zeitüberschreitung für eine Zeichenkette fest, die zu Javascript führt (schlecht, schlecht, sehr schlecht, schrecklich), oder definieren Sie eine anonyme Funktion, die diejenige aufruft, an der Sie interessiert sind :

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

RSolbergs Antwort kann al also Hilfe, obwohl es einen Unterschied zwischen visibility:hidden und display:none gibt.