JSイベントループの仕組みを深く理解する

この記事の内容は、JS イベント ループ メカニズムについての深い理解を共有することです。必要な友人はそれを参照できます。

以前に書きました

イベント ループ メカニズム。 js は非常に興味深いです。また、単純な setTimeout を調べることは、このメカニズムを調べることにもなるということは、多くのインタビューの質問からもわかります。
以前は、関数の実行が非常に速いので、setTimeoutの実行時間が0であってもすぐに出力されるのではなく、関数の実行を待ってから出力されるのではないかと単純に考えていました。これは半分だけ真実です。
実際、その動作メカニズムはjsのイベントループメカニズムであり、このループメカニズムはコールスタックとタスクキューに関連しています。

jsイベントループ機構

イベントループ機構とは、簡単に言うと、実行コンテキスト中に関数をスタックにプッシュしたりポップしたりすることです。関数は実行前にスタックにプッシュされ、実行後にポップアウトされます。コールバック関数、ajax、setTimeout などの非同期操作が発生した場合、実行のためにブラウザの他のモジュールに渡され、コールバック関数はタスクキューに入れられます。すべてのコールスタックが実行されると、タスクキュー内の関数が実行されます。
簡単な例を示します:

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

実行の内部プロセスを見てみましょう
1. 最初の文を実行し、それを呼び出しスタックに入れ、1を出力します

2. 最初の文をスタックからポップします。 2番目の文を実行します。非同期で実行されるため、他のモジュールに渡されます。

3. 実行後、コールバック関数をタスクキューに入れます

4. 最初のステップと同様に、ステートメントをスタックにプッシュして実行し、3を出力します

5。ステートメントをスタックからポップします。この時点では呼び出しスタックは空です。タスクキュータスクの実行を開始し、2を出力

ということで、出力結果は予想通り

となりました。

上級

Promise を追加するとどのように機能しますか?
Promise のコールバック関数は渡されず、 then を使用して呼び出されることがわかります。したがって、Promise で定義された関数はすぐに実行され、そのコールバック関数がキューに入れられます。
重要な概念については、参照記事にも記載されています:

マクロタスク には、スクリプト (コード全体)、setTimeout、setInterval、setImmediate、I/O、UI レンダリングが含まれます。
マイクロタスクには、process.nextTick、Promises、Object.observe、MutationObserver
が含まれます 実行シーケンス: 関数呼び出しスタックがクリアされ、グローバル実行コンテキストのみが残り、すべてのマイクロタスクが実行されます。すべての実行可能なマイクロタスクが実行された後。ループはマクロタスク内のタスクキューを再度実行し、実行後にすべてのマイクロタスクを実行し、このようにループが続きます。

別の例を見てみましょう:

(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);})()

具体的なプロセスについては、上記の記事をご覧ください。おおよそのプロセスは次のとおりです:
1. setTimeout が発生すると、実行のために他のモジュールに渡されます。
2. Promise が発生すると、コールバックが配置されます。すぐに実行され、1 が出力されます。
3. ループが開始され、resolve() が発生し、Promise ステータスが満たされるように変更されます。実行を続行し、2 を出力します。
4. 遭遇したら、マイクロタスクにコールバックを入れます。
5. 実行と出力を続行します。
6. コールスタックの実行が完了します。マイクロタスクでコールバック関数の実行を開始し、5 を出力します。
7. マイクロタスクの実行後、マクロタスク内のコールバック関数の実行が開始され、4が出力されます。
8.終わり。

以上がJSイベントループの仕組みを深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。