Detaillierte Analyse des Verständnisses des JavaScript-Ereignismechanismus

Dieser Artikel bietet Ihnen eine detaillierte Analyse des Verständnisses des JavaScript-Ereignismechanismus. Ich hoffe, er wird Ihnen als Referenz dienen.

Unterteilt nach Synchronisation und Asynchronität

• Bestimmen Sie zunächst, ob JS synchron oder asynchron ist. Wenn es synchron ist, wird es in den Hauptprozess eingegeben. es wird in die Ereignistabelle eingetragen

• Die asynchrone Aufgabe registriert die Funktion in der Ereignistabelle. Wenn die Triggerbedingung erfüllt ist, wird sie in die Ereigniswarteschlange verschoben

• Die synchrone Aufgabe tritt in den Hauptthread ein und wird ausgeführt, bis der Hauptthread inaktiv ist. Sie wechselt in die Ereigniswarteschlange, um zu prüfen, ob ausführbare asynchrone Aufgaben vorhanden sind, und wenn ja, werden sie in den Hauptprozess verschoben

Unterteilt in Makroaufgaben und Mikroaufgaben (genauer)

• Makroaufgabe (Makroaufgabe): einschließlich Gesamtcodeskript, setTimeout, setInterval, setImmediate, I/O, UI-Rendering

• Mikrotask (Mikrotask): Promise.then, process.nextTick

Viele Orte markieren Promise als Mikrotask Dies kann jedoch leicht dazu führen, dass Menschen fälschlicherweise denken, dass es sich bei dem Prozess um eine Mikroaufgabe handelt, wenn ein neues Versprechen ausgegeben wird. Tatsächlich sind Promsie.then und Promise.catch Mikrotasks. New Promise wird als gewöhnliches generiertes Objekt behandelt, daher markiere ich es hier als Promise.then

• , um diese Runde von Makroaufgaben auszuführen

• Wenn Sie während des Prozesses auf eine Mikrotask stoßen und es sich um eine synchrone Aufgabe handelt, legen Sie sie in die [Ereigniswarteschlange] der Mikrotask und asynchron in die [Ereignistabelle] ein ] der Mikrotask. Registrieren Sie die Funktion, erfüllen Sie die Ausführungsbedingungen und verschieben Sie sie in die Mikrotask [Ereigniswarteschlange] (bisher weiß ich nicht, ob Mikrotasks asynchrone Aufgaben haben)

• Wenn Sie auf eine Makroaufgabe stoßen, handelt es sich um eine synchrone Aufgabe. Legen Sie sie in die [Ereigniswarteschlange] der Makroaufgabe, fügen Sie sie asynchron in die [Ereignistabelle] der Makroaufgabe ein, registrieren Sie die Funktion, erfüllen Sie die Ausführungsbedingungen und verschieben Sie sie die Makroaufgabe [Ereigniswarteschlange]

• Überprüfen Sie nach der Ausführung dieser Runde von Makroaufgaben die [Ereigniswarteschlange] der Mikroaufgaben und führen Sie alle Mikroaufgaben aus Sequenz und führen Sie die nächste Runde von Makroaufgaben aus der Makroaufgabe aus [Ereigniswarteschlange]

Zugehöriges Wissen

• JS-Einzelthread, es gibt nur eine eindeutige Ereignisschleife in diesem Thread

• In einem Thread ist die Ereignisschleife eindeutig, es können jedoch mehrere Aufgabenwarteschlangen vorhanden sein (es gibt nur eine Mikroaufgabenwarteschlange)

• Aufgabenwarteschlangen werden in Makroaufgabenwarteschlangen und Mikroaufgabenwarteschlangen unterteilt

Dann stellt sich die Frage, welche Makroaufgabe es sein soll, wenn sich mehrere Makroaufgaben in der Warteschlange befinden soll für die nächste Reise ausgewählt werden? In der obigen Methode betrachte ich alle Makroaufgaben als Warteschlange

Beispiele

/* example1 */
setTimeout(function () {
    console.log(1);
},7);

new Promise(function (resolve) {
    console.log(2);
    for (var i = 0; i < 10000; i++) {
        i == 99 && resolve();
    }
}).then(function () {
    console.log(3);
    setTimeout(() => {
        console.log(4);
    });
})

console.log(5);
// 2 3 5 （4 7） 后两个数字的顺序与两定时器的delayTime有关，谁先满足触发条件就先输出谁 （html5 标准中，规定delayTime >= 4ms）

/* example2 */
setTimeout(_ => console.log(4));

new Promise(resolve => {
    resolve()
    console.log(1)
}).then(_ => {
    console.log(3)
    Promise.resolve().then(_ => {
        console.log('before timeout')
    }).then(_ => {
        Promise.resolve().then(_ => {
            console.log('also before timeout')
        })
    })
})

console.log(2);
// 这个也不难，分析分析就出结果了

endlich

Zusammenfassend die zweite Frage eines Anfängers

• Befinden sich asynchrone Aufgaben in der Mikrotask-Ereigniswarteschlange?

• Es gibt mehrere Makrotask-Ereigniswarteschlangen. Aus welcher Makrotask-Ereigniswarteschlange sollte für die nächste Makrotask-Runde entnommen werden?

Verwandte Empfehlungen:

Details zum JavaScript-Ereignisschleifenmechanismus – Vorlesung 2

JavaScript-Laufmechanismus-Ereignisse und Rückruffunktionen

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse des Verständnisses des JavaScript-Ereignismechanismus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!