CSS, HTML und Javascript mit {stil}

Asynchrone Verarbeitung vs synchrone Verarbeitung

Javascript asynchrone Verarbeitung ohne die Benutzerschnittstelle zu blockieren.

Einige Javascript-Funktionen sind von Haus aus asynchron: das Warten auf ein Event mit addEventListener, die Methoden des XMLHttpRequest-Objekts, Timer wie setTimeout und Animationen mit requestAnimationFrame().

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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Synchrone Verarbeitung vs asynchrone Methoden

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.

JS synchrone Verarbeitung Schritt für Schritt
Synchrones Abarbeiten von Anweisungen: Bei Requests an den Server ist die Benutzerschnittstelle blockiert
JS async
Asynchrone Verarbeitung – Requests werden im Hintergrund durchgefü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 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.