Asynchrone Verarbeitung vs synchrone Verarbeitung

Synchrone Verarbeitung vs asynchrone Methoden

In einem einfachen synchronen Programmablauf arbeitet Javascript Anweisungen Zeile für Zeile ab. Zeile 3 muss ausgeführt werden, bevor Zeile 4 in Angriff genommen wird.

Wenn eine Aufgabe – z.B. eine Berechnung oder das Einlesen einer Datei – länger dauert, blockiert ihre Ausführung alle folgenden Aktionen.

Diese Form der Verarbeitung kann man sich vorstellen wie ein Pizzabäcker mit einem kleinen Pizzaofen, in den immer nur eine Pizza passt: Erst wenn die Pizza fertig gebacken ist, kann der Pizzabäcker die nächste Pizza in den Ofen schieben.

Asynchrone Funktionen

Asynchrone Funktionen werden »quasi parallel« zu den folgenden Anweisungen durchgeführt – aber nur quasi, denn Javascript kann nur eine Anweisung nach der anderen durchführen.

In der Analogie des Pizzabäckers ist Platz für mehrere Pizzas und wann immer eine Pizza fertig ist, kann der Bäcker sie herausholen und eine neue Pizza nachschieben, wenn Bestellungen vorliegen.

Tatsächlich warten asynchrone Funktionen in einer Warteschlange auf Events und werden beim Eintreten des Events in einem freien Moment ausgeführt.

Wenn eine Aktion – z.B. das Lesen einer Datei auf dem Server – zu einer langatmigen Berechnung oder zum Warten auf Daten vom Server führt, und die Datei anfangs für die Darstellung der Seite nicht erforderlich ist, kann die Aktion aus der synchronen Verarbeitung herausgenommen werden – z.B. bis der Benutzer eine Aktion durchführt oder die Daten vom Server vorliegen.

console.log ("Schritt 6");

setTimeout (function () {
	console.log ("Asynchroner Schritt 7");
}, 5000);

console.log ("Schritt 8");

Schritt 6 wird sofort ausgeführt. In der Browser-Console wird sichtbar, dass Schritt 8 von Schritt 7 ausgeführt wird.

[Log] Schritt 6
[Log] Schritt 8
[Log] Asynchroner Schritt 7

Asynchrone Ereignisse

Javascript ist Single threaded, d.h., nur ein Javascript-Process läuft im Browser. Darum müssen wir asynchrone Aufrufe nutzen, denn würde das Script Zeile für Zeile ausgeführt, würde der Browser immer wieder hängen, während wir z.B. auf die Antwort eines HTTP-Requests warten.

Holt das Skript Daten mit fetch oder einem asynchronen XMLHttpRequest vom Server, wird die asynchrone Funktion nicht direkt ausgeführt wird, sondern wartet im Hintergrund auf eine Antwort. Sobald die Anwendung Zeit hat, wird sie den Antwort auf den Request ausführen.

const prettyPicture = () => 
	fetch ("fetch.json")
		.then (response => response.json ());

prettyPicture ()
	.then (console.log);

document.querySelector("main").classList.add("large");

Sehen wir uns hingegen ein anderes Beispiel an.

const simpleButton = document.getElementById ("simpleButton");
simpleButton.addEventListener ("click", function () {
	alert("Button wurde geklickt");
	let elem = document.createElement ("p");
	elem.innerHTML = "Auf ein Alert wird erbarmungslos gewartet und die Seite ist blockert.";
	this.appendChild (elem);
});

Wenn der Benutzer auf den Button klickt, erzeugt Javascript ein modales Fenster – alert. Das Browserfenster ist eingefroren, bis der Benutzer das modale Fenster durch einen Klick schließt. Javascript kann nur eine Anweisung nach der anderen durchführen.

Warten auf ein Event addEventListener

In dynamischen Anwendungen wollen wir vielleicht aber doch auf eine Aktion des Benutzers warten, weil die nächsten Anweisungen je nach Antwort des Benutzers ausfallen.