Detaillierte Erläuterung des einzelnen Threads und der Ereignisschleife in JS

Js ist Single-Threaded und der JS-Code wird nacheinander von oben nach unten ausgeführt. Wenn wir beispielsweise zwei Funktionen schreiben, muss die obere Funktion zuerst ausgeführt werden, und die untere Funktion wird später ausgeführt. Diese Art von Einzelthread hat jedoch ein sehr großes Problem: Wenn er auf eine zeitaufwändige Aufgabe stößt, können nachfolgende Aufgaben nur warten, bis die Ausführung abgeschlossen ist, bevor sie fortfahren. Beispielsweise ruft eine Ajax-Anfrage Daten vom Server ab, was von Natur aus zeitaufwendig ist. Wenn das Netzwerk langsamer ist, können wir nur noch auf die Rückgabe des Ergebnisses warten Was wird der Benutzer während des Wartevorgangs tun? Wenn dies der Fall ist, wird auch verhindert, dass die Benutzeroberfläche gerendert wird und die Erfahrung ist zu schlecht.

Was tun mit dieser zeitaufwändigen Aufgabe? js hat beschlossen, sie beiseite zu legen, die nachfolgenden Aufgaben zuerst auszuführen und dann zurückzukommen, um diese zeitaufwändigen Aufgaben zu erledigen. Dies führt das Konzept der Asynchronität ein, da die Reihenfolge, in der wir Code schreiben, nicht mit der Reihenfolge seiner Ausführung übereinstimmt. Es gibt drei Grundfunktionen und eine Ajax-Funktion (für asynchrone Operationen), aber die Ausführungsreihenfolge ist add -> 🎜>

function add(num1,num2) {    return num1 + num2;
}function subtract(num1,num2) {    return num2 - num1
}function ajax() {    var url = 'http://jsonplaceholder.typicode.com/posts/1';    var xhr = new XMLHttpRequest();
    xhr.open("GET",url); 
    xhr.onload= function () {
        console.log(xhr.responseText)
    }
    xhr.send()
}ajax();

console.log(add(3,5))

console.log(subtract(3,5))

Dies wirft eine weitere Frage auf: Wo werden die asynchronen Aufgaben platziert? Es wird später ausgeführt. Tatsächlich sollten wir hier auf ein Problem achten. Es ist nicht unser JS, das die Ajax-Operation ausführt, sondern der Browser. Es ist die von unserem Browser ausgegebene HTTP-Anfrage. Wenn js die Ajax-Funktion ausführt, weist es den Browser tatsächlich an, die http-Anfrage auszuführen, und kehrt dann sofort zurück, um den Code dahinter auszuführen, nämlich die Additions- und Subtraktionsfunktionen. Was sollen wir also tun, nachdem der Browser die http-Anfrage ausgeführt und die Daten vom Server abgerufen hat? Anschließend führt es unsere Rückruffunktion (Onload-Funktion) aus, die darin besteht, die zurückgegebenen Daten an die Rückruffunktion zu übergeben und die Rückruffunktion dann in die Ereigniswarteschlange (Aufgabenwarteschlange) einzufügen. Wenn js die Additions- und Subtrahierungsfunktionen beendet hat, wird die Ereigniswarteschlange (Aufgabenwarteschlange) abgefragt. Sobald es eine Onload-Callback-Funktion erkennt, wird diese abgerufen aus und führen Sie diese Funktion aus. Während der Ausführung des Programms führt js weiterhin Abfragen durch, bis das Programm endet.

Der Js-Code ist während der Ausführung des gesamten Programms in zwei Teile unterteilt. Einer ähnelt der Add-Funktion und der andere ähnelt der Ajax-Onload-Callback-Funktion . Es gibt zwei Teile, einer ist der Hauptthread und der andere ist die Aufgabenwarteschlange (asynchrone Rückruffunktion).

Die spezifische Funktionsweise des JS-Codes ist wie folgt:

1. Sobald der JS-Code geladen ist, wird er nacheinander von oben nach unten ausgeführt und in a eingegeben Wenn er auf eine globale Ausführungsumgebung stößt, weist er den Browser an, die Anforderung auszuführen, und kehrt dann sofort zurück, um den folgenden Code auszuführen. Wenn er auf den Funktionsaufruf stößt, wird er nach der Ausführung aufgerufen Nach der Additionsfunktion wird die Subtraktionsfunktion erneut aufgerufen. Die Funktionsausführungsumgebung wird erneut aufgerufen. Natürlich ist es hier einfacher, es gibt keine verschachtelten Funktionen. Wenn eine Funktion in der Funktion verschachtelt ist, tritt sie in die Ausführungsumgebung der Unterfunktion ein, wie in der folgenden Abbildung gezeigt, und bildet einen Ausführungsstapel. Nachdem die obere Funktion ausgeführt wurde, wird die untere ausgeführt Code in der globalen Ausführungsumgebung Nach Abschluss der Ausführung ist der Ausführungsstapel leer und dies ist der Hauptthread von js.

　2. Der Browser führt die HTTP-Anfrage aus. Zu diesem Zeitpunkt wird er entweder Daten vom Server abrufen oder den Erfolg melden Oder die fehlgeschlagene Rückruffunktion wird in die Aufgabenwarteschlange (Rückruffunktion) gestellt.

　3. Nachdem der gesamte Code im Ausführungsstapel ausgeführt wurde, dh wenn der Ausführungsstapel leer ist, fragt js unsere Aufgabenwarteschlange ab (Bild links). , Wenn eine Aufgabe vorhanden ist, wird die erste Aufgabe (registrierte Rückruffunktion) aus der Startposition der Aufgabenwarteschlange entfernt und zur Ausführung auf den Ausführungsstapel gelegt (Bild rechts, nachdem die Rückruffunktion ausgeführt wurde). Der Ausführungsstapel wird dann wieder leer sein. Wenn es eine Rückruffunktion gibt, wird die erste herausgenommen und zur Ausführung auf den Ausführungsstapel gelegt. Während der Ausführung des gesamten Programms fragt js weiterhin unsere Aufgabenwarteschlange ab. Sobald eine Aufgabe vorhanden ist, wird diese ausgeführt.

Alle Programme werden auf dem Stapel ausgeführt. Nur wenn der Ausführungsstapel leer ist, kann er die nächste Aufgabe bearbeiten. Solange eine Funktion in den Ausführungsstapel gelangt, ist der Stapel nicht leer. Wenn der Stapel nicht leer ist, kann die nächste Funktion nicht verarbeitet werden und kann nur warten, bis die Funktion ausgeführt wird. Dies wird als „Run-to-Complete“ bezeichnet und kann jeweils nur eine Aufgabe ausführen. Dies erfordert auch, dass unsere Rückruffunktion nicht zu viele Aufgaben ausführen kann. Wenn zu viele Aufgaben ausgeführt werden, ist der Stapel nicht leer, was die Ausführung der nächsten Aufgabe verhindert und zu einer Blockierung führt.

Das Obige ist in js nicht blockierend.

Verwandte Empfehlungen:

Warum JavaScript im JavaScript-Ausführungsmechanismus Single-Threaded ist

Die Verwendung von Single-Threaded JS und Multi- Thread-Browser

Detaillierte Erläuterung des nativen asynchronen und einzelnen Threads von JS

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des einzelnen Threads und der Ereignisschleife in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!