Das ermöglicht eine Web-API des Browsers mit der Funktion „setTimeout“. Da JavaScript „single-threaded“ ist, kann sie immer nur eine Aufgabe ausführen und nicht gleichzeitig mehrere Tasks lösen. JavaScript läuft standardmäßig im Hauptthread des Browsers. Damit verhindert wird, dass die gesamte Benutzeroberfläche einfriert, während man auf das Lösen einer Aufgabe wartet, die etwas länger dauert, bietet uns der Browser eine Web-API mit der Funktion „setTimeout“. Damit können wir Aufgaben verzögert ausführen, ohne den Hauptthread zu blockieren.
Man könnte sich den Call Stack als Bücherstapel vorstellen, jede Aufgabe ist ein Buch, das, wenn es neu dazukommt, oben drauf gelegt wird.
Der Call Stack ist ein Mechanismus, den JavaScript verwendet, um
Funktionsausführungen zu verfolgen. Wenn wir eine Funktion aufrufen,
fügt JavaScript diese Funktion dem sogenannten "Call Stack"
(Aufrufstapel) hinzu. Wenn diese Funktion eine andere Funktion
aufruft, fügt JavaScript diese Funktion ebenfalls zum Aufrufstapel,
oberhalb der ersten Funktion hinzu. Wenn eine Funktion einen Wert
zurückgibt, wird sie vom Stapel geworfen. Dieser Vorgang wird mit
jeder anderen Funktion wiederholt, die von der vorherigen Funktion
aufgerufen wird. Wenn eine Funktion beendet ist, entfernt JavaScript
diese Funktion aus der Aufrufliste. (Wer eine Veranschaulichung
braucht, schaut
hier.)
Der Call Stack wird von oben nach unten ausgeführt: Die zuletzt dem
Stack hinzugefügte Funktion wird als erste ausgeführt. Die erste dem
Stack hinzugefügte Funktion wird als letzte ausgeführt. Dies wird auch
als LIFO-Prinzip (Last-In-First-Out) bezeichnet
Mit der Funktion „setTimeout“, die uns vom Browser bereitgestellt wird, kümmert sich die WebAPI um den Rückruf („Callback“). Die Web-API hat quasi einen Timer, der so lange läuft, wie die Millisekunden, die wir im Code angegeben hatten. Der Callback wird nicht sofort zum Call Stack zurückgegeben, sondern zunächst in eine sogenannte Warteschlange („Queue“) übergeben. Dort muss die Funktion warten, bis sie an der Reihe ist.
Nun kommt die Event-Loop ins Spiel, deren einzige Aufgabe es ist, die Warteschlange mit dem Call Stack zu verbinden! Wenn der Call Stack leer ist, also alle zuvor aufgerufenen Funktionen ihre Werte zurückgegeben haben und aus dem Stapel entfernt wurden, wird das erste Element in der Warteschlange der Aufrufliste hinzugefügt. Schließlich wird der Callback dem Call Stack hinzugefügt, aufgerufen, gibt einen Wert zurück und wird aus dem Stack entfernt.