Wie Microtasks / Macrotasks dressieren?

[Christian Schubert]

Hallo,

der Code macht eigentlich keine Probleme [und trägt wohl auch zum besseren Verständnis relativ wenig bei], die Frage ist eher eine grundsätzlichere.

Prinzipiell funktioniert alles, wie es soll. Du hast aber Recht - es bringt wohl nicht viel, lange um des Kaisers Bart herumzureden und euch so unnötig die Zeit zu stehlen, daher, um konkret zu werden:

in einem Fall ist es zum Beispiel so, dass Positionseigenschaften (top, left, ...) von Elementen im DOM verändert werden (erste Funktion), dann einige Berechnungen passieren und die Positionseigenschaften abermals verändert werden (zweite Funktion) - dieses Mal animiert.

Da es sich beim Repaint des DOM um Macrotasks handelt, werden sowohl die Positionsveränderungen der ersten, als auch der zweiten Funktion hintangestellt, was natürlich unerwünschte Nebenwirkungen mit sich bringt (nochmal, mir ist auch vollkommen bewusst, warum ich das Resultat erziele, das ich erziele):

erzieltes Resultat:

BERECHNUNGEN > DOM REPAINT > DOM REPAINT 👎

gewünschtes Resultat:

DOM REPAINT > BERECHNUNGEN > DOM REPAINT 👍