Heim Web-Frontend js-Tutorial Detaillierte Erläuterung des einzelnen Threads und der Ereignisschleife in JS

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

Mar 31, 2018 pm 05:16 PM
javascript Zyklus Detaillierte Erklärung

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial
1511
276
Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Mar 08, 2024 pm 03:06 PM

Das Windows-Betriebssystem ist eines der beliebtesten Betriebssysteme der Welt und seine neue Version Win11 hat viel Aufmerksamkeit erregt. Im Win11-System ist die Erlangung von Administratorrechten ein wichtiger Vorgang. Mit Administratorrechten können Benutzer weitere Vorgänge und Einstellungen auf dem System durchführen. In diesem Artikel wird ausführlich beschrieben, wie Sie Administratorrechte im Win11-System erhalten und wie Sie Berechtigungen effektiv verwalten. Im Win11-System werden Administratorrechte in zwei Typen unterteilt: lokaler Administrator und Domänenadministrator. Ein lokaler Administrator verfügt über vollständige Administratorrechte für den lokalen Computer

Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detaillierte Erläuterung der Divisionsoperation in OracleSQL In OracleSQL ist die Divisionsoperation eine häufige und wichtige mathematische Operation, die zur Berechnung des Ergebnisses der Division zweier Zahlen verwendet wird. Division wird häufig in Datenbankabfragen verwendet. Daher ist das Verständnis der Divisionsoperation und ihrer Verwendung in OracleSQL eine der wesentlichen Fähigkeiten für Datenbankentwickler. In diesem Artikel werden die relevanten Kenntnisse über Divisionsoperationen in OracleSQL ausführlich erörtert und spezifische Codebeispiele als Referenz für die Leser bereitgestellt. 1. Divisionsoperation in OracleSQL

Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators Mar 19, 2024 pm 04:33 PM

Der Modulo-Operator (%) in PHP wird verwendet, um den Rest der Division zweier Zahlen zu ermitteln. In diesem Artikel werden wir die Rolle und Verwendung des Modulo-Operators im Detail besprechen und spezifische Codebeispiele bereitstellen, um den Lesern ein besseres Verständnis zu erleichtern. 1. Die Rolle des Modulo-Operators Wenn wir in der Mathematik eine ganze Zahl durch eine andere ganze Zahl dividieren, erhalten wir einen Quotienten und einen Rest. Wenn wir beispielsweise 10 durch 3 dividieren, ist der Quotient 3 und der Rest ist 1. Um diesen Rest zu ermitteln, wird der Modulo-Operator verwendet. 2. Verwendung des Modulo-Operators In PHP verwenden Sie das %-Symbol, um den Modul darzustellen

Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs Feb 22, 2024 pm 08:21 PM

Detaillierte Erläuterung der Funktion system() des Linux-Systems Der Systemaufruf ist ein sehr wichtiger Teil des Linux-Betriebssystems. Er bietet eine Möglichkeit, mit dem Systemkernel zu interagieren. Unter diesen ist die Funktion system() eine der am häufigsten verwendeten Systemaufruffunktionen. In diesem Artikel wird die Verwendung der Funktion system() ausführlich vorgestellt und entsprechende Codebeispiele bereitgestellt. Grundlegende Konzepte von Systemaufrufen Systemaufrufe sind eine Möglichkeit für Benutzerprogramme, mit dem Betriebssystemkernel zu interagieren. Benutzerprogramme fordern das Betriebssystem an, indem sie Systemaufruffunktionen aufrufen

Detaillierte Erläuterung des Linux-Befehls „curl'. Detaillierte Erläuterung des Linux-Befehls „curl'. Feb 21, 2024 pm 10:33 PM

Detaillierte Erläuterung des Linux-Befehls „curl“ Zusammenfassung: Curl ist ein leistungsstarkes Befehlszeilentool für die Datenkommunikation mit dem Server. In diesem Artikel wird die grundlegende Verwendung des Curl-Befehls vorgestellt und tatsächliche Codebeispiele bereitgestellt, um den Lesern zu helfen, den Befehl besser zu verstehen und anzuwenden. 1. Was ist Locken? Curl ist ein Befehlszeilentool zum Senden und Empfangen verschiedener Netzwerkanfragen. Es unterstützt mehrere Protokolle wie HTTP, FTP, TELNET usw. und bietet umfangreiche Funktionen wie Datei-Upload, Datei-Download, Datenübertragung und Proxy

Der Lambda-Ausdruck bricht aus der Schleife aus Der Lambda-Ausdruck bricht aus der Schleife aus Feb 20, 2024 am 08:47 AM

Wenn der Lambda-Ausdruck aus der Schleife ausbricht, sind spezifische Codebeispiele erforderlich. Bei der Programmierung ist die Schleifenstruktur eine wichtige Syntax, die häufig verwendet wird. Unter bestimmten Umständen möchten wir jedoch möglicherweise aus der gesamten Schleife ausbrechen, wenn eine bestimmte Bedingung im Schleifenkörper erfüllt ist, anstatt nur die aktuelle Schleifeniteration zu beenden. Zu diesem Zeitpunkt können uns die Eigenschaften von Lambda-Ausdrücken dabei helfen, das Ziel zu erreichen, aus der Schleife zu springen. Der Lambda-Ausdruck ist eine Möglichkeit, eine anonyme Funktion zu deklarieren, die intern einfache Funktionslogik definieren kann. Es unterscheidet sich von einer gewöhnlichen Funktionsdeklaration:

PHP gibt alle Werte im Array zurück, um ein Array zu bilden PHP gibt alle Werte im Array zurück, um ein Array zu bilden Mar 21, 2024 am 09:06 AM

In diesem Artikel wird ausführlich erläutert, wie PHP alle Werte eines Arrays zurückgibt, um ein Array zu bilden. Der Herausgeber hält dies für recht praktisch, daher teile ich es Ihnen als Referenz mit und hoffe, dass Sie nach dem Lesen dieses Artikels etwas gewinnen können . Verwenden der Funktion array_values() Die Funktion array_values() gibt ein Array aller Werte in einem Array zurück. Die Schlüssel des ursprünglichen Arrays bleiben nicht erhalten. $array=["foo"=>"bar","baz"=>"qux"];$values=array_values($array);//$values ​​​​werden ["bar","qux"]Verwendet Eine Schleife kann eine Schleife verwenden, um alle Werte des Arrays manuell abzurufen und zu einem neuen hinzuzufügen

Ein tiefer Einblick in rekursive Algorithmen in C# Ein tiefer Einblick in rekursive Algorithmen in C# Feb 19, 2024 pm 08:09 PM

Für eine detaillierte Erklärung des rekursiven Algorithmus von C# sind spezifische Codebeispiele erforderlich. 1. Was ist ein rekursiver Algorithmus? Von einer Rekursion spricht man, wenn sich eine Funktion oder Methode während der Ausführung selbst aufruft. Rekursive Algorithmen sind eine gängige Problemlösungsmethode in der Programmierung. Es zerlegt ein Problem in ein oder mehrere Unterprobleme, die dem ursprünglichen Problem ähneln, aber kleiner sind, und löst dann das ursprüngliche Problem durch Lösen dieser Unterprobleme. Rekursive Algorithmen werden häufig zur Lösung sich wiederholender Probleme verwendet. 2. So implementieren Sie rekursive Algorithmen In C# gibt es zwei Hauptmethoden zur Implementierung rekursiver Algorithmen: direkte Rekursion und indirekte Rekursion. gerade

See all articles