Async Await und .then()?

[Rolf B]

Hallo Bertl,

wenn fünf CSS Animationen hintereinander ausgeführt werden sollen und danach der Javascript Code weiter ausgeführt werden soll

Ob Du das mit Promises hinbekommst, da zweifle ich noch. Dazu müsste man mehr über den Plan wissen, den Du verfolgst.

aber ist das denn schlimm, wenn ein Promise nichts zurückgibt?

Nö. Das ist nicht schlimm.

Ich war da, scheint mir, selbst ein bisschen verwirrt - denn dass await warten() zu undefined führt hat mit dem Rest nicht so viel zu tun.

Entscheidender ist, dass man await und then besser nicht mischt. Wenn Du 3 Animationsfunktionen hast, die jeweils ein Promise resolven, sobald die Animation durch ist, dann mach entweder

function animate()
{
   return animation1()
          .then(animation2)
          .then(animation3);
          .then(() => console.log("fertig");
   // das Promise des letzen .then wird zurückgegeben. Es resolved
   // zu undefined (weil console.log das zurückgibt)
}

ODER

async function animate()
{
   await animation1();
   await animation2();
   await animation2();
   console.log("fertig");
   // Ein Promise wird zurückgegeben, das zu undefined resolved,
   // sobald die animate-Funktion durch ist.
}

Du kannst auf beide Varianten mit await warten oder auf den Rückgabewert mit .then einen Fortsetzungshandler registrieren.

Ob sich das für Animationen eignet, musst Du schauen. Das hängt auch davon ab, was deine Animierfunktionen tun. Normalerweise schreibt man Animationen über Events (requestAnimationFrame) oder man definiert sie mit CSS. Es funktioniert nicht, in einer for-Schleife eine Variable von 0 bis 100 laufen zu lassen um bspw. ein Rechteck von Position 0 bis 100 zu bewegen. Weil dazwischen immer eine Layout-Phase nötig ist, und diese nicht kommt, solange JavaScript läuft.

Statt dessen gibt es das WAAPI (Web Animations API) und auch CSS Animationen, beide mit eigenen Events und Schnittstellen. Ich habe damit noch nicht so viel gemacht und kann darum nicht viel dazu beitragen.

Rolf