jQuery addClass - neue Elementabmessungen

[netsurfer]

Hallo Jungs!

So, hab' mich erst jetzt wieder mit der Materie beschäftigen können.

Trotzdem hab ich ne Idee zur Lösung:

Setz eine window.setTimeout()-Schleife ein.

Kein schlechter Gedanke, aber das wird nicht verlässlich funktionieren. Wenn man mit JavaScript eine HTML-Klasse vergibt, dann unternimmt der Browser sofort einen blockierenden Reflow.

So dachte ich bisher auch. Scheint aber in meinem Fall (durch die per JS zugewiesene Klasse erhält das betreffende Element einen Multi-Column Style) nicht so zu sein. Der Browser braucht anscheinend für eine gewisse Zeit für die Berechnung und Umsetzung (ohne zwischenzeitliche Blockade).

Der TO braucht die Abmessungen unmittelbar danach. Denn beim nächsten Reflow könnten die Element-Abmessungen schon wieder andere sein. Mit setTimeout() reiht man einen asynchronen Task in den Event-Loop ein, man hat keine Kontrolle darüber, dass es sich dabei um den Task handelt, der als nächstes ausgeführt wird. Es können diverse andere Tasks dazwischen kommen, zum Beispiel von einem setTimeout()-Aufruf an einer anderen Stelle im Skript, von einem Klick, den der Benutzer ausgeführt hat, oder von einer AJAX-Antwort, die inzwischen eingetroffen ist. Jeder dieser Tasks kann wiederum durch DOM-Manipulation weitere Reflows auslösen.

setTimeout() wird hier also nicht den gewünschten Effekt haben (zumindest kann man sich darauf nicht verlassen). Das Positive daran ist, dass man setTimeout gar nicht benötigte, wie gesagt, findet der Reflow blockierend und unmittelbar in Folge der DOM-Manipulation statt, es ist möglich mit der nächsten Anweisung sofort die neuen Abmessungen auszulesen.

Das halte ich bis zum Beweis des Gegenteils erstmal für ein Gerücht ...! ;-)

Das führt natürlich zu der Frage, warum der TO trotzdem ein Szenario beobachtet hat, in dem das nicht der Fall zu sein schien. Das Mysterium können wir nur lüften, wenn wir den fraglichen Code zu Gesicht bekommen.

Können wir uns gerne mal per Mail drüber austauschen ;-)

Ich habe es jetzt trotzdem (erstmal) mit einer rekursiven setTimeout() Schleife gemacht (plus zusätzlichem Zähler, um ggf. eine Endlosschleife zu verhindern). In den von mir bisher getesteten Browsern (Chrome und FF) liefert sie reproduzierbar im zweiten Durchlauf den "korrekten", bzw. geänderten Wert.

Also schon mal meinen besten Dank an alle hier!

Wenn ich mal Zeit und Luft habe, werde ich mich noch eingehender mit diesem "Phänomen" beschäftigen.

Gruß Gunther