JavaScriptのpromiseとsetTimeoutの実行順序の問題（コード例）

この記事の内容はJavaScriptにおけるpromiseとsetTimeoutの実行順序(コード例)ですので、お困りの方は参考にしていただければ幸いです。

Promise は es6 によって導入された言語標準であり、非同期プログラミングのソリューションです。

この記事を読むための前提条件は、ブラウザーのイベント ループのメカニズムと基本的な機能を理解することです。 Promise と機能 (自己実行機能、状態を元に戻せない機能など) の使用法。

問題が発生します

次のコードと質問を見てみましょう

setTimeout(function(){console.log(1)},0);
new Promise(function(resolve){
    console.log(2)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(3)
}).then(function(){
    console.log(4)
});
console.log(5);
// 这的问题是，为什么答案是 2 3 5 4 1
// 而不是 2 3 5 1 4

promise.then と setTimeout は両方とも非同期であるため、promise.then のイベントはイベント ループ キュー内で setTimeout の後ろに配置されるはずですが、なぜpromise.then が setTimeout より前に出力されるのでしょうか。

重要な概念

イベント ループの概念

• Javascript はシングルスレッドであり、すべての同期タスクはメイン スレッドで実行されます。

• メインスレッド内のすべてのタスクが実行されると、システムはタスクキュー内のイベントを「順番に」読み取ります。対応する非同期タスクがメインスレッドに入り、実行を開始します。

• 非同期タスクには違いがあるため、実行優先順位も異なります。大きく分けて、マイクロタスク（Promise、MutaionObserverなどのマイクロタスク）とマクロタスク（setTimeout、setInterval、I/Oなどのマクロタスク）に分かれます。

• Promise executor のコードは同期的に呼び出されますが、コールバックはマイクロタスクに基づいています。

• #マクロ タスクはマイクロ タスクよりも優先度が高くなります

• 現在のマイクロ タスク キューは、各マクロ タスクが実行された後にクリアする必要があります

• 最初のスクリプト タグのコードは、最初のマクロ タスクです。

• メイン スレッドは、すべてのタスクが実行されるまで上記の手順を繰り返します。

私の理解

コードの実行プロセスを見てみましょう。

すべてのコードは script タグで記述されているので、すべて読んでください。コードは次のとおりです。最初のマクロ タスクの実行を開始します。

最初に 2 番目のマクロタスクである setTimeout が発生します。これをマクロタスク イベント キューにスローし、最初にキューに入れます。

Promise に遭遇すると、Promise Executor のコードが同期的に呼び出されるため、2 と 3 を順番に出力します。

Promise のコールバックに遭遇した場合、それはマイクロタスクであるため、マイクロタスクのイベント キューにスローします。

次に、5 を出力し、次にマイクロタスクを実行して 4 を出力します。

最初のマクロ タスクが実行された後、次のマクロ タスクを実行して 1 を出力します。この時点で, すべてのタスクが実行されます。

つまり、最終結果は 2 3 5 4 1 になります。

以上がJavaScriptのpromiseとsetTimeoutの実行順序の問題（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。