Asynchrone Verarbeitung vs synchrone Verarbeitung

Synchrone Verarbeitung vs asynchrone Methoden

Asynchrone Funktionen werden quasi parallel zu den dahinter folgenden Anweisungen durchgeführt – aber nur quasi, denn Javascript kann nur eine Anweisung nach der anderen durchführen. Tatsächlich warten sie auf Events und werden erst in einem freien Moment ausgeführt.

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

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 Schritt 8 von Schritt 7 ausgeführt.

[Log] Schritt 6 (event-listener-async.html, line 236)
[Log] Schritt 8 (event-listener-async.html, line 242)
[Log] Asynchroner Schritt 7 (event-listener-async.html, line 239)

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. Holen wir Daten mit einem GET-Request vom Server, nutzen wir dem XMLHTTP-Request, um mit der Ausführung der anderen Anweisungen fortzufahren, während die asynchrone Funktion nicht direkt ausgeführt wird, sondern im Hintergrund auf eine Antwort wartet.

Der XMLHTTP-Request wartet in einer Warteschlange bis eine Antwort anliegt und die Anwendung Zeit hat, den Request auszuführen.

let xhr = new XMLHttpRequest();

//         Methode  Datei       asynchron
xhr.open ( "GET",  "books.xml", true );

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        //console.log (xhr.responseText);
        document.querySelector(".listxmp").innerHTML = xhr.responseText;
    }
}

xhr.send ();

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.