JavaScript における setTimeout(..., ) の実際の意味は何ですか? (イベントループの説明!)

JavaScript における setTimeout(..., 0ms) の実際の意味は何ですか? (イベントループの説明!)

それでは、この setTimeout の全体を 0ms で分解してみましょう。一見すると、「0ms ということは、すぐに実行されるということですよね?」と思うかもしれません。しかし、JavaScript には独自の雰囲気があり、0 ミリ秒は期待するほど瞬時ではありません。これを一緒に考えてみましょう。

コード:

これが私たちが分析しているコードです:

const promise = new Promise((resolve, reject) => {
  console.log(1); 
  setTimeout(() => { 
    console.log("timerStart");
    resolve("success"); 
    console.log("timerEnd");
  }, 0); 
  console.log(2); 
});

promise.then((res) => {
  console.log(res); 
})

console.log(4);

そして出力は?

1  
2  
4  
timerStart  
success  
timerEnd  

大きな疑問: 0ms で何が起こっているのでしょうか?

setTimeout(() => { ... }, 0) を見ると、内部のコードが 0 ミリ秒後のすぐに実行されるように感じられます。しかし、そうではありません。JavaScript は、「兄弟、私は独自のシステムを持っています。順番を待ってください!」のようなものです。

JavaScript のシステム: イベント ループ

JavaScript はコードを直接実行するだけではなく、タスクを処理するための イベント ループ と呼ばれる優れたシステムを備えています。次のように考えてください:

1. メインタスク (同期):
   
   console.log() のようなものが最初に実行されます。これらは直接的な、目の前にあるタスクです。

2. マイクロタスク (約束):
   
   たとえタイマーの前であっても、約束は次に来るものです。まるでVIPチケットを手に入れたようだ。

3. タスクキュー (setTimeout などのタイマー):
   
   タイマーはラインの最後尾に置かれ、マイクロタスクが完了した後にのみ実行されます。 0msを与えても待機します。

コードを分解する

何が起こっているのかを段階的に見てみましょう:

1. 作成された約束:

   • console.log(1) はすぐに実行されます。
   • setTimeout(() => { ... }, 0) は タスクキュー に追加されます。
   • console.log(2) はすぐに実行されます。

2. Promise .then():

   • .then() コールバックが マイクロタスク キュー に追加されます。

3. console.log(4):

   • メイン スクリプトの一部であるため、直接実行されます。

4. マイクロタスクの実行 (VIP):

   • Promise が解決されるため、.then() コールバックは「成功」を記録します。

5. タスクキューの実行:

   • setTimeout コールバックがついに順番を迎えます。「timerStart」と「timerEnd」をログに記録します。

0ms が「現在」を意味しないのはなぜですか?

0ms と言っているにもかかわらず、setTimeout は常に延期されます。 JavaScript は、何があってもそれを タスクキュー にプッシュします。システムは、タスク キューにアクセスする前に、まずすべての同期タスクとマイクロタスク (Promise) をクリアします。

簡単に言うと、

0 ミリ秒は時間のことではありません。順番を待っているのことです。

このように考えてください

ジェットコースターの列に並んでいると想像してください:

1. 同期コード: ファストトラックのチケットを購入した人 - 彼らが最初であり、議論の余地はありません。
2. 約束: VIP パスをお持ちの方は、たとえ遅れてきても次の列に並びます。
3. タイマー (setTimeout など): パスを持たない一般の人。 「0ms待ってください」と言ったとしても、彼らは通常の列に並ばなければなりません。

最終的な出力の要約

コード内のイベントの順序は次のとおりです:

1. console.log(1) (同期)
2. console.log(2) (同期)
3. console.log(4) (同期)
4. .then() からの「成功」 (マイクロタスク)
5. console.log("timerStart") (タスクキュー)
6. console.log("timerEnd") (タスクキュー)

なぜこれが重要なのでしょうか?

0ms が実際にどのように機能するかを理解すると、より良い非同期コードを作成するのに役立ちます。これは、JavaScript のランダムな遅延をデバッグしている友人に説明するための素晴らしいトリックでもあります。

次に setTimeout(() => { ... }, 0) を見たときは、時間の問題ではないことを覚えておいてください。 優先についてです!

以上がJavaScript における setTimeout(..., ) の実際の意味は何ですか? (イベントループの説明!)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。