Zusammenfassung

In dieser Lektion hast du gelernt:

• setTimeout(function () { ... }, 2000) führt die Funktion einmal aus, 2000 Millisekunden (2 Sekunden) später. Übergib die Funktion selbst, ohne ().
• Das Skript wartet nicht auf einen Timer: Die Zeilen nach setTimeout() laufen sofort, also gehört alles, was nach dem Warten passieren soll, in die Funktion.
• setTimeout() gibt die ID des Timers zurück, und clearTimeout(timer) bricht den Timer ab. Speichere die ID in einer let-Variable außerhalb der Handler, damit jeder Handler sie benutzen kann.
• setInterval(function () { ... }, 1000) führt die Funktion jede Sekunde aus, bis clearInterval(timer) sie stoppt. Eine Variable außerhalb der Funktion merkt sich, was sich zwischen den Durchläufen ändert, etwa die verbleibenden Sekunden.
• button.disabled = true; deaktiviert einen Button, solange die Seite beschäftigt ist, und false aktiviert ihn wieder.
• Eine Funktion, die eine Weile braucht, gibt ein Promise zurück, einen Wert, der später ankommt. await wartet auf den Wert und funktioniert nur in einer Funktion, die mit async markiert ist. Ohne await bekommst du das Promise selbst, und die Seite zeigt [object Promise].
• Eine async-Funktion kann mehrmals warten, einen Schritt nach dem anderen, zum Beispiel mit await warte(1000);. Der Rest der Seite arbeitet in der Zwischenzeit weiter.
• Eine Meldung wie Lädt… vor dem await sagt dem Nutzer, dass die Seite wartet.
• Wenn ein Promise fehlschlägt, wirft await einen Fehler. try { ... } catch (fehler) { ... } fängt ihn, und fehler.message ist sein Text. finally läuft am Ende in beiden Fällen.

In der nächsten Lektion, Daten von einem Server, laden deine Seiten mit fetch() Daten von einem Server. Auch diese Funktion gibt ein Promise zurück, also verwendest du dort ständig await.

Aber zuerst noch etwas Übung mit Timern: ein Blitzquiz, bei dem der Spieler nur 2 Sekunden zum Antworten hat. Diesmal ist script.js leer, und du schreibst das ganze Programm selbst.