Suche…
Die Ereignisschleife in einem Webbrowser
Die große Mehrheit moderner JavaScript-Umgebungen arbeitet nach einer Ereignisschleife . Dies ist ein weit verbreitetes Konzept in der Computerprogrammierung, das heißt im Wesentlichen, dass Ihr Programm ständig darauf wartet, dass neue Dinge geschehen, und wenn sie dies tun, reagiert sie darauf. Die Host-Umgebung ruft in Ihrem Programm auf und erzeugt in der Ereignisschleife einen "Turn" oder "Tick" oder "Task", der dann bis zum Abschluss ausgeführt wird . Wenn diese Runde beendet ist, wartet die Host-Umgebung auf etwas anderes, bevor alles beginnt.
Ein einfaches Beispiel dafür ist der Browser. Betrachten Sie das folgende Beispiel:
<!DOCTYPE html>
<title>Event loop example</title>
<script>
console.log("this a script entry point");
document.body.onclick = () => {
console.log("onclick");
};
setTimeout(() => {
console.log("setTimeout callback log 1");
console.log("setTimeout callback log 2");
}, 100);
</script>
In diesem Beispiel ist die Hostumgebung der Webbrowser.
- Der HTML-Parser führt zuerst das
<script>. Es wird vollständig ausgeführt. - Der Aufruf von
setTimeoutteilt dem Browser mit, dass er nach 100 Millisekunden eine Task in die Warteschlange stellen sollte, um die angegebene Aktion auszuführen. - In der Zwischenzeit ist die Ereignisschleife dafür verantwortlich, ständig zu prüfen, ob noch etwas zu tun ist, beispielsweise das Rendern der Webseite.
- Wenn nach 100 Millisekunden die Ereignisschleife aus einem anderen Grund nicht belegt ist, wird die Task angezeigt, die
setTimeoutEnqueues verwendet, und die Funktion wird ausgeführt, wobei diese beiden Anweisungen protokolliert werden. - Wenn jemand auf den Körper klickt, wird der Browser zu jeder Zeit eine Aufgabe in der Ereignisschleife bereitstellen, um die Click-Handler-Funktion auszuführen. Während die Ereignisschleife ständig überprüft, was zu tun ist, wird dies angezeigt und diese Funktion ausgeführt.
Sie können sehen, wie in diesem Beispiel verschiedene Arten von Einstiegspunkten in JavaScript-Code vorhanden sind, die von der Ereignisschleife aufgerufen werden:
- Das
<script>-Element wird sofort aufgerufen - Die
setTimeoutAufgabe wird in die Ereignisschleife geschrieben und einmal ausgeführt - Die Click-Handler-Aufgabe kann mehrmals gepostet und jedes Mal ausgeführt werden
Jede Runde der Ereignisschleife ist für viele Dinge verantwortlich. Nur einige von ihnen rufen diese JavaScript-Aufgaben auf. Ausführliche Informationen finden Sie in der HTML-Spezifikation
Eine letzte Sache: Was meinen wir damit, dass jede Ereignisschleifenaufgabe "bis zum Abschluss" ausgeführt wird? Wir meinen, dass es generell nicht möglich ist, einen Codeblock zu unterbrechen, der als Task ausgeführt wird, und es ist niemals möglich, Code mit einem anderen Codeblock verschachtelt auszuführen. Selbst wenn Sie beispielsweise zum perfekten Zeitpunkt geklickt haben, können Sie den obigen Code niemals dazu verwenden, "onclick" zwischen den beiden setTimeout callback log 1/2" ist kooperativ und in der Warteschlange, statt präemptiv.
Asynchrone Operationen und die Ereignisschleife
Viele interessante Operationen in gängigen JavaScript-Programmierumgebungen sind asynchron. Im Browser sehen wir zum Beispiel Dinge wie
window.setTimeout(() => {
console.log("this happens later");
}, 100);
und in Node.js sehen wir Dinge wie
fs.readFile("file.txt", (err, data) => {
console.log("data");
});
Wie passt das zur Event-Schleife?
Das funktioniert so, dass diese Anweisungen bei Ausführung der Anweisungen der Host-Umgebung (dh der Browser- bzw. der Node.js-Laufzeit) mitteilen, dass sie etwas ausführen sollen, wahrscheinlich in einem anderen Thread. Wenn die Host-Umgebung das erledigt hat (dh 100 Millisekunden warten oder die Datei file.txt lesen), wird eine Aufgabe in die Ereignisschleife geschrieben, die besagt, dass "der Rückruf aufgerufen wurde, den ich zuvor mit diesen Argumenten erhalten habe".
Die Ereignisschleife ist dann mit ihren Aufgaben beschäftigt: Rendern der Webseite, Beobachten der Benutzereingaben und ständiges Suchen nach veröffentlichten Aufgaben. Wenn diese geposteten Aufgaben zum Aufrufen der Rückrufe angezeigt werden, ruft sie JavaScript zurück. So erhalten Sie asynchrones Verhalten!