Eins nach dem anderen

Eine Funktion, die mit async markiert ist, kann mehrmals warten. Jedes await wartet auf sein Promise, und erst dann geht die Funktion zur nächsten Zeile. So lässt sich leicht beschreiben, was nacheinander passiert, wie in einem Rezept.

Fürs Warten selbst gibt es eine praktische kurze Funktion, die du in der script.js dieser Übung findest:

function warte(ms) {
    return new Promise(function (resolve) {
        setTimeout(resolve, ms);
    });
}

Sie gibt ein Promise zurück, das seinen Wert bekommt, sobald ms Millisekunden vergangen sind: setTimeout() ruft dafür resolve auf. Mit await warte(1000); pausierst du also eine async-Funktion für eine Sekunde. Vergleiche den Countdown der Rakete mit setInterval() mit diesem hier:

startButton.addEventListener("click", async function () {
    for (let sekunden = 3; sekunden > 0; sekunden--) {
        countdown.textContent = sekunden;
        await warte(1000);
    }
    countdown.textContent = "Abheben!";
});

Die Schleife zeigt 3 und wartet eine Sekunde, zeigt 2 und wartet, zeigt 1 und wartet, und dann hebt die Rakete ab. Es gibt kein Intervall, das du stoppen müsstest: Die Schleife endet einfach.

Ohne await müsstest du jeden nächsten Schritt in die Funktion eines Timers schreiben, in die Funktion des vorherigen Timers, und der Code würde mit jedem Schritt weiter nach rechts wachsen.

Ein typischer Fehler ist, das await vor warte(1000) zu vergessen: Dann wartet nichts, und alle Schritte passieren gleichzeitig. Du siehst nur den letzten.

In der nächsten Lektion wartest du auf diese Weise zweimal hintereinander: zuerst auf die Antwort eines Servers, dann auf die Daten darin.