Heim  >  Artikel  >  Web-Frontend  >  Ausführungssequenz der Ereignisschleife (Event Loop) in Javascript

Ausführungssequenz der Ereignisschleife (Event Loop) in Javascript

不言
不言nach vorne
2018-10-27 14:00:102570Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Ausführungssequenz der Ereignisschleife (Ereignisschleife) in JavaScript. Ich hoffe, dass er für Sie hilfreich ist.

Kurze Einführung: Sprechen Sie über die Ausführungsreihenfolge von Promise.resove, SetTimeout, SetImmediate, Process.nextTick in der EvenLoop-Warteschlange

Die Ursache des Problems

Die Ereignisschleife ist jedem bekannt. Sie bezieht sich auf das zyklische Lesen von Aufgaben aus der „Aufgabenwarteschlange“ des Hauptthreads, z. B.

例1:

setTimeout(function(){console.log(1)},0);

console.log(2)

//输出2,1

Im obigen Beispiel verstehen wir, dass die Synchronisierungsaufgabe in Der Hauptthread wird zuerst ausgeführt, und wenn der Hauptthread ausgeführt wird Nachdem die Thread-Aufgabe ausgeführt wurde, wird die Aufgabe aus der Ereignisschleife gelesen, sodass zuerst 2 und dann 1 ausgegeben wird.

Die Reihenfolge, in der die Ereignisschleife Aufgaben liest, hängt von den Einschränkungen verschiedener Regeln zum Lesen von Aufgaben in der Aufgabenwarteschlange (Jobwarteschlange) ab. Im folgenden Beispiel gibt

例2:

setTimeout(function () {
  console.log(3);
}, 0);

Promise.resolve().then(function () {
  console.log(2);
});
console.log(1);
//输出为  1  2 3

zuerst 1 aus. Es gibt kein Problem, da die Synchronisierungsaufgabe zuerst im Hauptthread ausgeführt wird. Das Problem besteht darin, wie die Ausführungspriorität von setTimeout und Promise.then ist Aufgaben definiert sind.

Ausführungsreihenfolge

Die Warteschlange in der Jobwarteschlange ist in zwei Typen unterteilt: Makroaufgabe und Mikroaufgabe. Nehmen wir ein Beispiel, um die Vorschriften zur Ausführungsreihenfolge zu betrachten. Nehmen wir an, dass die Ausführungsreihenfolge von

macro-task队列包含任务: a1, a2 , a3
micro-task队列包含任务: b1, b2 , b3

lautet: Führen Sie zuerst die Aufgabe am Anfang der Marco-Aufgabenwarteschlange aus, die a1 darstellt (a1 stellt die dar). Führen Sie nach Abschluss der Ausführung alle Aufgaben in der Mikroaufgabenwarteschlange aus, dh führen Sie b1, b2, b3 (asynchron) nacheinander aus. Löschen Sie nach der Ausführung die Aufgaben in der Mikroaufgabe und führen Sie dann Marco aus. Die zweite Aufgabe (asynchron) in der Aufgabe führt eine Schleife nacheinander aus.

Nachdem wir die Ausführungsreihenfolge von Makrotask- und Mikrotask-Warteschlangen verstanden haben, schauen wir uns die Aufgaben an, die tatsächlich in diesen beiden Arten von Warteschlangen in realen Szenarien enthalten sind (wir nehmen als Beispiel die Knoten-V8-Engine). Knoten V8, die tatsächliche Aufgabenreihenfolge dieser beiden Typen ist wie folgt:

Makroaufgabenwarteschlange enthält tatsächlich Aufgaben:

script(主程序代码)[对应上方的a1],setTimeout, setInterval, setImmediate, I/O, UI rendering

Mikroaufgabenwarteschlange enthält tatsächlich Aufgaben:

process.nextTick, Promises, Object.observe, MutationObserver

Die Ausführungsreihenfolge, die wir daraus erhalten, sollte sein:

script(主程序代码)—>process.nextTick—>Promises...——>setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering

In ES6 heißt die Makroaufgabenwarteschlange auch ScriptJobs und die Mikroaufgabe auch PromiseJobs

Beispiel

(1) setTimeout und Promise

例3:

setTimeout(function () {
  console.log(3);
}, 0);

Promise.resolve().then(function () {
  console.log(2);
});

console.log(1);

(2) Process.nextTick und Promise, setTimeout

例子4:
setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);
//输出2,6,5,3,4,1

(3) Komplexere Beispiele

setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   setTimeout(function(){resolve()},0)
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);

//输出的是  2 6 5 1 3 4

Diese Beispiele bitte beurteilen Die Gründe laut Ausführungsanordnung werde ich hier nicht einzeln erläutern

Das obige ist der detaillierte Inhalt vonAusführungssequenz der Ereignisschleife (Event Loop) in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen