Der Titel der Frage drückt aus, was ich für die ultimative Frage hinter meinem speziellen Fall halte.
Mein Fall: In einem Click-Handler möchte ich ein Bild sichtbar machen (eine 'Lade'-Animation), kurz bevor eine Funktion gestartet wird. Dann möchte ich es wieder unsichtbar machen, nachdem die Funktion abgeschlossen ist. Statt dessen, was ich erwartet habe, erkenne ich, dass das Bild niemals sichtbar wird. Ich nehme an, dass dies daran liegt, dass der Browser darauf wartet, dass der Handler beendet wird, bevor er neu zeichnen kann (ich bin mir sicher, dass es gute Gründe dafür gibt).
Der Code (auch in dieser Geige: Ссылка )
html:
%Vor%js:
%Vor% Ich habe den Aufruf alert direkt nach der Funktion sleepStupidly hinzugefügt, um anzuzeigen, dass der Browser in diesem Moment der Erholung neu zeichnet, aber nicht vorher. Ich habe unschuldig erwartet, dass es neu gezeichnet wird, nachdem die 'Anzeige' auf 'Blockieren' gesetzt wurde;
Für den Datensatz habe ich auch versucht, html-Tags anzuhängen oder CSS-Klassen auszutauschen, anstatt dass das Bild in diesem Code ein- und ausgeblendet wird. Gleiches Ergebnis.
Nach all meinen Recherchen denke ich, dass ich die Fähigkeit brauchen würde, den Browser zu zwingen, neu zu zeichnen und bis dahin alles andere zu stoppen.
Ist es möglich? Ist es in einer Crossbrowser-Art möglich? Irgendein Plugin konnte ich vielleicht nicht finden ...?
Ich dachte, dass vielleicht etwas wie 'jquery css callback' (wie in dieser Frage: In JQuery, ist es möglich, Callback-Funktion nach dem Setzen neuer CSS-Regel zu bekommen? ) würde den Trick tun ... aber das ist nicht vorhanden .
Ich habe auch versucht, das Vorzeigen, den Funktionsaufruf und das Verbergen in verschiedenen Handlern für das gleiche Ereignis zu trennen ... aber nichts. Fügen Sie auch setTimeout hinzu, um die Ausführung der Funktion zu verzögern (wie hier empfohlen: Erzwingen der DOM-Aktualisierung in JavaScript ).
Danke und ich hoffe es hilft auch anderen.
Javier
BEARBEITEN (nachdem ich meine bevorzugte Antwort eingestellt habe):
Nur um weiter zu erklären, warum ich die window.setTimeout Strategie gewählt habe. In meinem realen Anwendungsfall habe ich festgestellt, dass ich dem Browser ca. 1000 Millisekunden geben musste, um dem Browser genügend Zeit zu geben, um die Seite neu zu zeichnen (viel mehr als die 50 für das Geigenbeispiel). Dies ist meiner Meinung nach auf einen tieferen DOM-Baum zurückzuführen (in der Tat unnötig tief). Mit der Methode setTimeout let können Sie das tun.
Verwenden Sie window.setTimeout() mit einer kurzen unbemerkbaren Verzögerung, um die langsame Funktion auszuführen:
Um das erneute Zeichnen zu erzwingen, können Sie offsetHeight oder getComputedStyle () verwenden.
%Vor%oder
%Vor%"el" ist ein DOM-Element
Ich weiß nicht, ob das in Ihrem Fall funktioniert (wie ich es nicht getestet habe), aber wenn CSS mit JavaScript / jQuery manipuliert wird, ist es manchmal notwendig, das Neuzeichnen eines bestimmten Elements zu erzwingen, damit Änderungen wirksam werden.
Dies geschieht, indem einfach eine CSS-Eigenschaft angefordert wird.
In Ihrem Fall würde ich versuchen, vor dem Funktionsaufruf kitty.position().left; zu setzen, bevor Sie mit setTimeout fertig werden.
Was für mich funktionierte, ist folgendes:
%Vor%Danach können Sie tun, was Sie wollen, und schließlich möchten Sie tun:
%Vor%Tags und Links javascript jquery dom