JavaScriptのイベントメカニズムを理解するための詳細な分析

この記事は、JavaScript イベントのメカニズムを理解するための詳細な分析を提供します。必要な方は参考にしていただければ幸いです。

同期と非同期による

• まず、JSが同期か非同期かを判断します

• 非同期タスクはトリガー時にイベントテーブルに関数を登録します。条件が満たされると、イベント キューにプッシュされます

• 同期タスクは、メイン スレッドに入った後に実行されます。メイン スレッドがアイドル状態の場合、実行可能な非同期タスクがあるかどうかを確認するためにイベント キューに移動します。存在する場合は、メインプロセスにプッシュされます

マクロタスクとマイクロタスクに分割されます(より正確)

• macro-task (マクロタスク): コードスクリプト全体、setTimeout、setIntervalを含む、setImmediate、I/O、UIレンダリング

• micro-task (micro-task) ): Promise.then、process.nextTick

多くの場所でPromiseをマイクロタスクとしてマークしていますが、これは人々が簡単に次のように誤解する可能性があります。新しい Promise を作成するときのプロセスはマイクロタスクです。実際、Promsie.then と Promise.catch はマイクロタスクであり、新しい Promise が使用されると、これらは通常の生成されたオブジェクトとして扱われるため、このラウンドのマクロ タスクの実行中に Promise.then

• としてマークします。

マイクロタスクに遭遇し、それが同期タスクの場合は、マイクロタスクの[イベントキュー]に入れ、マイクロタスク[イベントテーブル]に非同期で入れ、関数を登録し、実行条件を満たしてプッシュしますマイクロタスク[イベントキュー]に入れます(今のところ、マイクロタスクに非同期タスクがあるかどうかはわかりません)
マクロタスクに遭遇したとき、それが同期タスクであれば、マクロタスクの[イベントキュー]に入れ、マクロタスクの[イベントテーブル]に非同期で関数を登録し、実行条件を満たしてマクロタスクの[イベントキュー]にプッシュします

この一連のマクロタスクの実行後、[マイクロタスクのイベントキュー]を呼び出し、その中のすべてのマイクロタスクをマクロタスクから順に実行する タスク[イベントキュー]内の次のマクロタスクを実行する
関連知識

JS単体スレッド、このスレッドにはイベント ループが 1 つだけあります
1 つのスレッド内でイベント ループは固有ですが、複数のタスク キューが存在する可能性があります (マイクロ タスク キューは 1 つだけです)
タスク キューマクロタスクキューとマイクロタスクキューに分かれています

• そこで質問ですが、マクロタスクキューが複数ある場合、次のマクロタスクはどれを取るべきですか？上記の方法では、すべてのマクロタスクをキューとして扱います
例

/* 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);
// 这个也不难，分析分析就出结果了

最後に

要約すると、2番目の質問です

マイクロタスクイベントキューに非同期タスクはありますか?
複数のマクロタスク イベント キューがあります。マクロタスクの次のラウンドではどのマクロタスク イベント キューから取得する必要がありますか?
関連する推奨事項:

JavaScript イベント ループ メカニズムの詳細 - 講義 2

JavaScript 実行メカニズムのイベントとコールバック関数

以上がJavaScriptのイベントメカニズムを理解するための詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。