Wiederholen mit setInterval

setTimeout() führt eine Funktion einmal aus. setInterval() führt sie immer wieder aus, jedes Mal nach der angegebenen Zahl von Millisekunden, bis du dieses Intervall stoppst. Es gibt ebenfalls eine ID zurück, und clearInterval() stoppt das Intervall. Hier ist der Countdown einer Rakete:

const countdown = document.querySelector("#countdown");

let sekunden = 3;
countdown.textContent = sekunden;

const timer = setInterval(function () {
    sekunden--;
    if (sekunden === 0) {
        clearInterval(timer);
        countdown.textContent = "Abheben!";
    } else {
        countdown.textContent = sekunden;
    }
}, 1000);

Die Seite zeigt 3, eine Sekunde später 2, dann 1 und dann Abheben! In diesem Moment stoppt clearInterval(timer) das Intervall, und seine Funktion läuft nicht mehr.

Beachte Folgendes:

• Die Funktion läuft zum ersten Mal nach der ersten Sekunde, nicht sofort. Deshalb zeigt das Skript die 3 selbst an, bevor es das Intervall startet.
• Die Variable sekunden steht außerhalb der Funktion, damit sie sich die Zahl von einem Durchlauf der Funktion zum nächsten merkt, wie beim Klickzähler. Mit let sekunden = 3; innerhalb der Funktion würde jeder Durchlauf wieder bei 3 beginnen, und die Seite würde für immer 2 zeigen.
• Das Intervall kann sich selbst stoppen: Seine Funktion darf timer verwenden, denn sie läuft erst später, wenn timer schon die ID enthält.

Typische Fehler:

• clearInterval() vergessen: Der Countdown läuft weiter bis 0, -1, -2 … solange die Seite geöffnet ist.
• clearInterval(sekunden): Es braucht die ID des Intervalls, nicht die Zahl, die du herunterzählst.
• Ein Intervall zweimal starten, zum Beispiel durch zwei Klicks auf einen Start-Button: Dann laufen zwei Intervalle gleichzeitig, und der Countdown geht doppelt so schnell. Wie bei der Rakete in der vorigen Übung stoppst du zuerst das vorherige mit clearInterval(timer).