Promise が setTimeout() よりも速い理由の詳細な分析-jsチュートリアル-php.cn

Promise が setTimeout() よりも速い理由の詳細な分析

青灯夜游

リリース： 2021-02-04 16:04:58

転載

1597 人が閲覧しました

Promise が setTimeout() より速いのはなぜですか?次の記事ではその理由を分析します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Promise が setTimeout() よりも速い理由の詳細な分析

関連する推奨事項: 「JavaScript ビデオチュートリアル」

1. 実験

実験をしてみましょう。すぐに解決される Promise と即時 setTimeout (つまり、setTimeout 0 ミリ秒) のどちらが速く実行されますか?

Promise.resolve(1).then(function resolve() {
  console.log(&#39;Resolved!&#39;);
});

setTimeout(function timeout() {
  console.log(&#39;Timed out!&#39;);
}, 0);

// &#39;Resolved!&#39;
// &#39;Timed out!&#39;

ログイン後にコピー

promise.resolve(1) はstatic すぐに解決される promise を返す関数。 setTimeout(callback, 0)0 ミリ秒 の遅延でコールバック関数を実行します。

最初に 'Resolved!' が出力され、次に Timeout completed! が出力されることがわかります。すぐに解決される Promise は、即時 setTimeout 。

は、Promise.resolve(true).then(...) が setTimeout(..., 0) より前に呼び出されたため、Promise プロセスはもっと速いですか？公正な質問です。

それでは、実験条件を少し変更して、setTimeout(..., 0):

setTimeout(function timeout() {
  console.log(&#39;Timed out!&#39;);
}, 0);

Promise.resolve(1).then(function resolve() {
  console.log(&#39;Resolved!&#39;);
});

// &#39;Resolved!&#39;
// &#39;Timed out!&#39;

ログイン後にコピー

setTimeout(..., 0) を呼び出してみましょう。 ) は Promise.resolve(true).then(...) の前に呼び出されます。ただし、Resolved! が最初に出力され、次に 'Timed out!' が出力されます。＃＃＃＃＃＃どうしてこれなの？

2. イベントループ

非同期 JS に関する質問は、イベントループを学習することで解決できます。非同期 JS がどのように動作するかの主要コンポーネントを確認してみましょう。

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-Lt9zVHTf-1611275604640)(/img/bVcMQaI)]

Call stack

は、コードの実行中に作成された実行コンテキストを格納する LIFO (後入れ先出し) 構造です。簡単に言えば、コールスタックはこれらの関数を実行します。 Web API では、非同期操作 (フェッチリクエスト、プロミス、タイマー) とそのコールバックが完了を待機します。

**タスクキュー (タスクキュー)

は、実行準備ができている非同期操作のコールバックを保存する

FIFO (先入れ先出し)** 構造です。たとえば、タイムアウトした setTimeout() のコールバック関数や、実行準備ができたクリックボタンイベントハンドラは、タスクキューにキューイングされます。 **ジョブキュー (ジョブキュー)** は FIFO (先入れ先出し) 構造で、実行準備が整った

promise

のコールバックを保存します。たとえば、完了した Promise の resolve または reject コールバックはジョブキューに入れられます。最後に、イベントループはコールスタックが空かどうかを永続的に監視します。コールスタックが空の場合、イベントループはジョブキューまたはタスクキューを調べ、実行の準備ができているコールバックをコールスタックにディスパッチします。

3. ジョブキューとタスクキュー

この実験をイベントループの観点から見て、コードの実行を段階的に分析していきます。

A) コールスタックは

setTimeout(..., 0)

を実行し、タイマー timeout() をスケジュールします。コールバックは Web API に保存されます。 [外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-SLk0AUa5-1611275604642)(/img/bVcMQdg)]

[外部リンク画像転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-Zr7usYTK-1611275604643)(/img/bVcMQc9)]

B) スタック実行を呼び出します

Promise.resolve (true).then(resolve)

そして promise ソリューションを手配します。 resolved()コールバックは Web API に保存されます: [外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムが備わっている可能性があります。画像を保存することをお勧めします。直接アップロードしてください (img-JTwSnLYS- 1611275604646)(/img/bVcMQdh)]

[外部リンク画像の転送に失敗しました。ソースサイトにはホットリンク対策メカニズムがある可能性があります。画像を保存することをお勧めします。直接アップロードしてください (img-k5cRhqzN-1611275604648)(/img/bVcMQdi )]

C) Promise はすぐに解決され、タイマーはすぐに実行されます。このようにして、タイマーコールバック

timeout()

がタスクキューに入り、promise コールバック resolve() がジョブキューに入ります。 [外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムが組み込まれている可能性があります。画像を保存して直接アップロードすることをお勧めします (img-iMfLB2YJ-1611275604649)(/img/bVcMQdS)]

D ) ここからが興味深い部分です。ジョブキュー (マイクロタスク) ) はタスクキュー (マクロタスク) よりも高い優先順位を持っています。イベントループは、ジョブキューから Promise コールバック

resolve()

を取得し、コールスタックに入れます。次に、コールスタックは Promise コールバック resolve(): [外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムが組み込まれている可能性があります。画像を作成して直接アップロードします (img-nnqfgoo1 -1611275604650)(/img/bVcMQey)]

E) 最後に、イベントループはタイマーコールバック

timeout()

をタスクキューからデキューします。呼び出しスタック。次に、コールスタックはタイマーコールバック timeout(): [外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムが備わっている可能性があります。画像を作成して直接アップロードします (img- Fj54WaI0-1611275604650)(/img/bVcMQeB)]

呼び出しスタックは空で、スクリプトの実行は完了しました。