JavaScriptのイベントメカニズムを理解するための詳細な分析-jsチュートリアル-php.cn

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

不言

リリース： 2018-08-27 10:44:12

オリジナル

1228 人が閲覧しました

この記事は、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

としてマークします。

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

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

ログイン後にコピー