Informationen zum Schleifenmechanismus von js-Ereignissen (ausführliches Tutorial)

Dieser Artikel stellt hauptsächlich den js-Ereignisschleifenmechanismus vor und analysiert die Verwendung und Techniken anhand von Beispielen.

Dieser Artikel gibt Ihnen eine detaillierte Analyse der Prinzipien und der Verwendung des Ereignisschleifenmechanismus in JS anhand von Beispielen. Das Folgende ist der vollständige Inhalt:

var start = new Date()
setTimeout(function () {
 var end = new Date
 console.log('Time elapsed:', end - start, 'ms')
}, 500)
while (new Date() - start < 1000) {
}

Gibt es andere Sprachen, die das können? die erwarteten Funktionen erfüllen? Java, in Java.util.Timer, wird die Lösung geplanter Aufgaben durch Multithreading implementiert. Das Aufgabenobjekt wird in der Aufgabenwarteschlange gespeichert und ein dedizierter Planungsthread schließt die Ausführung der Aufgabe in einem neuen Unterthread ab >

js ist Single-Threaded

Der Hauptzweck von JavaScript besteht darin, mit Benutzern zu interagieren und das DOM zu manipulieren. Dies legt fest, dass es nur Single-Threaded sein kann, da es sonst zu sehr komplexen Synchronisationsproblemen kommt.

Um die Rechenleistung von Multi-Core-CPUs zu nutzen, schlägt HTML5 den Web Worker-Standard vor, der es JavaScript-Skripten ermöglicht, mehrere Threads zu erstellen, die untergeordneten Threads werden jedoch vollständig vom Haupt-Thread gesteuert und müssen dies auch tun Betreiben Sie das DOM nicht. Daher ändert dieser neue Standard nichts an der Single-Threaded-Natur von JavaScript.

Funktionsaufrufstapel und Aufgabenwarteschlange

Aufrufstapel

Wenn JS ausgeführt wird, wird ein Aufrufstapel ausgeführt Wenn eine Funktion aufgerufen wird, werden die Rücksprungadresse, die Parameter und die lokalen Variablen auf den Stapel verschoben. Wenn eine andere Funktion in der aktuell ausgeführten Funktion aufgerufen wird, wird der relevante Inhalt der Funktion ebenfalls auf den Stapel verschoben Nachdem die Funktion ausgeführt wurde, werden auch Variablen vom Typ „Pop“ entfernt. Da die Werte des komplexen Typs noch im Heap gespeichert sind, werden sie gelöscht Vom GC recycelt.

Ereignisschleife) und Aufgabenwarteschlange

Der JavaScript-Hauptthread verfügt über einen Ausführungsstapel und eine Aufgabenwarteschlange

Wenn ein asynchroner Vorgang auftritt (zum Beispiel: setTimeout, AJAX) Der asynchrone Vorgang wird vom Browser (Betriebssystem) ausgeführt. Der Browser schiebt die vordefinierte Rückruffunktion in die Aufgabenwarteschlange des Hauptthreads, nachdem der Ausführungsstapel des Hauptthreads abgeschlossen ist Wenn der Thread gelöscht wird, wird die Rückruffunktion in der Task-Warteschlange gelesen. Nachdem die Task-Warteschlange gelesen wurde, tritt der Haupt-Thread in eine Endlosschleife ein, die als Ereignisschleife bezeichnet wird Der Ausführungsstapel und die Aufgabenwarteschlange werden zyklisch ausgeführt und bilden eine Ereignisschleife

Fazit

setTimeout() fügt das Ereignis einfach in die „Aufgabenwarteschlange“ ein muss warten, bis die Ausführung des aktuellen Codes (Ausführungsstapels) abgeschlossen ist, bevor der Hauptthread die von ihm angegebene Rückruffunktion ausführt. Wenn der aktuelle Code lange dauert, kann es lange dauern, sodass nicht garantiert werden kann, dass die Rückruffunktion zu dem von setTimeout () angegebenen Zeitpunkt ausgeführt wird.

Ein weiteres Beispiel

(function test() {
 setTimeout(function() {console.log(4)}, 0);
 new Promise(function executor(resolve) {
 console.log(1);
 for( var i=0 ; i<10000 ; i++ ) {
 i == 9999 && resolve();
 }
 console.log(2);
 }).then(function() {
 console.log(5);
 });
 console.log(3);
})()

Makrotask und Mikrotask

Makrotask und Mikrotask sind zwei Klassifikationen asynchroner Aufgaben. Beim Anhalten von Aufgaben teilt die JS-Engine alle Aufgaben nach Kategorien in diese beiden Warteschlangen ein. Zuerst wird die erste Aufgabe aus der Makrotask-Warteschlange entnommen (diese Warteschlange wird auch als Aufgabenwarteschlange bezeichnet). Aus der Mikrotask-Warteschlange werden alle Aufgaben nacheinander ausgeführt. Anschließend wird die Makrotask-Aufgabe abgerufen, und der Zyklus beginnt erneut, bis alle Aufgaben aus beiden Warteschlangen abgerufen sind.

Makroaufgabe: Skript (Gesamtcode), setTimeout, setInterval, setImmediate, I/O, UI-Rendering

Mikroaufgabe: process.nextTick, Promises (bezieht sich hier auf das native Promise, das von implementiert wird browser) , Object.observe, MutationObserver

Fazit

Vollständiger Code (Skript) Makrotask -> Mikrotask-Warteschlange (enthält Versprechen .then) –> tritt vor allen asynchronen Aufgaben auf

Die durch setImmediate angegebene Aufgabe wird immer in der nächsten Ereignisschleife ausgeführt

process.nextTick(function A() {
 console.log(1);
 process.nextTick(function B(){console.log(2);});
});
setTimeout(function timeout() {
 console.log('TIMEOUT FIRED');
}, 0)

new Promise(function(resolve) {
 console.log('glob1_promise');
 resolve();
}).then(function() {
 console.log('glob1_then')
})
process.nextTick(function() {
 console.log('glob1_nextTick');
})

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird für alle hilfreich sein Zukunft.

Verwandte Artikel:

So entwickeln Sie einen zweidimensionalen Wochenansichtskalender mit Javascript

Über das abstrakte JS-Fabrikmuster (ausführliches Tutorial )

So lösen Sie den Konflikt zwischen Django- und Vue-Syntax

So crawlen Sie Website-Bilder in NodeJS

Das obige ist der detaillierte Inhalt vonInformationen zum Schleifenmechanismus von js-Ereignissen (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!