Javascript 面接の質問の説明 - 非同期動作

setTimeout を使用した JavaScript の非同期動作

導入

この記事では、言語の非同期の性質、特にクロージャと setTimeout 関数がどのように連携するかを示す、魅力的な JavaScript コードを見ていきます。ループが予期しない結果を出力する理由に困惑したことがあるなら、あなたは正しい場所にいます!

主要なコンセプト

コードに入る前に、いくつかの概念について説明します。

非同期プログラミング:

JavaScript はシングルスレッドです。つまり、一度に 1 つのコードしか実行できません。ただし、非同期操作を処理できるため、メインスレッドが実行を継続している間に特定のタスクをバックグラウンドで実行できます。

SetTimeout

この関数は、指定された遅延の後にコードを実行するために使用されます。コールバック関数とミリ秒単位の遅延の 2 つのパラメータを取ります。

クロージャ

クロージャは、関数がそのスコープ外で実行された場合でも、その字句スコープへのアクセスを保持する関数です。これは、非同期コールバックで変数にどのようにアクセスするかを理解するために非常に重要です。

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

詳細に入る前に、このコード スニペットを見てください。現在の理解に基づいて出力がどのようになるかを推測してください。このアプローチは、JavaScript スキルを強化するだけでなく、その後の説明をより有意義なものにすることができます

JavaScript が各行をどのように処理するかを考えてください。推測を行ったら、それが正しいかどうかを確認するために読み続けてください!

説明

コードを段階的に分解してみましょう:

ループ実行 : ループは 5 回実行され、i は 0 から 4 まで増加します。

setTimeout: i の各値について、setTimeout は i * 1000 ミリ秒後に i を記録するようにスケジュールされています。

クロージャ: setTimeout コールバックが実行されるまでに、ループはすでに完了しており、i の最終値は 5 になります。したがって、すべてのコールバックは 5 を記録します。

例外として考えられること

0
1
2
3
4

実際に何が起こるか

5
5
5
5
5

ただし、これは実際に表示される出力ではありません。この理由は、i 変数のスコープに関連する一般的な JavaScript の動作です。

提供されたコードでは、i 変数は var を使用して宣言されています。これは、関数スコープがあることを意味します。 setTimeout() 関数が実行されるとき、ループはすでに完了しており、i の値は 5 です。したがって、すべての setTimeout() 関数は、遅延に関係なく、値 5 をコンソールに記録します。

問題の解決

期待される出力 0、1、2、3、4 を達成するには、

• 即時呼び出し関数式 (IIFE) を使用して、反復ごとに新しいスコープを作成できます。
• var の代わりに let キーワードを使用できます。

解決

すぐに呼び出される関数式

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

各 setTimeout は i の現在の値をキャプチャし、出力は次のようになります:

0
1
2
3
4

Let キーワードを使用する

let キーワードはブロック スコープの変数を作成します。これは、ループの各反復に i 変数の独自のコピーがあり、setTimeout() 関数が反復ごとに i の正しい値を取得することを意味します。

結論

JavaScript が非同期オペレーションとクロージャをどのように処理するかを理解することは、効果的なコードを作成するために重要です。元のコード スニペットは、setTimeout 関数がループ変数 i とどのようにやり取りするかを示す良い例として機能します。 IIFE を使用すると、各タイムアウトが正しい値をログに記録することができます。したがって、次回同じような状況に遭遇したときは、クロージャの力と、クロージャが JavaScript での非同期動作の管理にどのように役立つかを思い出してください

ミッション完了: コードの解明!

この説明でコードが明確になっただけでなく、さらに詳しく調べたいという好奇心が湧いてくれれば幸いです。 JavaScript には驚きと強力なツールがたくさんあり、学習するたびに習得に近づきます。

読んでいただきありがとうございます

この内訳を楽しんでいただければ幸いです!コメントでご意見、ご質問、今後のトピックに関するアイデアをお気軽に共有してください。

ハッピーコーディング

記事を気に入っていただき、サポートをしていただける場合は、必ず次のことを行ってください:

フォローしてください

以上がJavascript 面接の質問の説明 - 非同期動作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。