Asynchronous JavaScript - Lerndokumentation

Synchron vs. Asynchron

Synchroner Code

Grossteil des Codes ist synchron
Synchroner Code wird Zeile für Zeile ausgeführt
Jede Codezeile wartet, bis die vorherige Zeile beendet ist

Problem: Langlaufende Operationen blockieren die Ausführung!

const p = document.querySelector('p');
p.textContent = 'My name is Levin!';
alert('Text was edited!');
p.style.color = 'red';

Hier blockiert der alert die Codeausführung und die Seite funktioniert nicht, bis der User mit dem Alert interagiert.

Asynchroner Code

Asynchroner Code wird ausgeführt, nachdem ein Task, die im “Hintergrund” läuft, beendet ist
Asynchroner Code ist nicht-blockierend
Die Ausführung wartet nicht darauf, dass ein asynchroner Task seine Arbeit beendet

const p = document.querySelector('p');
setTimeout(() => {
  p.textcontent = 'My name is Levin!';
}, 5000);
p.style.color = 'red';

Der Time läuft asynchron ab, das heisst die Textfarbe wird rot obwohl der Timer eigentlich die Ausführung stoppt. Der Timer wird jedoch im Hintergrund ausgeführt, dann nach 5 Sekunden wird die Callback-Funktion darin aufgerufen.

AJAX

Promises