Heim >Web-Frontend >js-Tutorial >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.
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!