Asynchronität (Einführung)

Bisher lief dein JavaScript-Code meist Schritt für Schritt: Eine Zeile wird ausgeführt, dann die nächste. Der Fachbegriff dafür ist synchroner Code – jede Anweisung wartet, bis die vorherige fertig ist.

Im Web passiert aber oft etwas, das Zeit braucht: Daten von einem Server laden, auf eine Benutzeraktion warten oder einen Timer starten. Dafür braucht JavaScript Asynchronität – Aufgaben laufen im Hintergrund, während der Rest des Programms weiterarbeitet.

Synchron vs. Asynchron

Synchron bedeutet: Der Code wartet. Erst wenn eine Aufgabe fertig ist, geht es weiter.

Asynchron bedeutet: Eine Aufgabe wird gestartet, aber der Code wartet nicht darauf. Stattdessen macht das Programm weiter und reagiert später auf das Ergebnis.

Ein einfaches Beispiel ist setTimeout(). Es startet eine Funktion nach einer bestimmten Zeit – ohne den restlichen Code anzuhalten:

1console.log("Start");
2
3setTimeout(function() {
4    console.log("Nach 2 Sekunden");
5}, 2000);
6
7console.log("Ende");

Beachte die Reihenfolge: "Ende" erscheint vor "Nach 2 Sekunden" – obwohl der Timer zuerst im Code steht.

Warum ist das wichtig?

Ohne Asynchronität würde der Browser bei langsamen Aufgaben einfrieren – Buttons reagieren nicht, Scrollen funktioniert nicht. Asynchroner Code sorgt dafür, dass die Webseite reaktionsfähig bleibt.

Typische asynchrone Aufgaben im Web sind zum Beispiel:

• Daten von einer API laden
• Bilder oder Dateien vom Server holen
• Auf Klicks und andere Events warten
• Timer und Animationen ausführen

Was kommt als Nächstes?

In den folgenden Kapiteln lernst du, wie du asynchronen Code in JavaScript sauber handhabst – mit Promises, async/await und fetch zum Laden von Daten aus dem Internet.