JavaScript の実行を理解する: setTimeout と Promises を使用して同期動作と非同期動作を判断する

JavaScript によるコードの実行方法を理解する: 同期パターンと非同期パターン

JavaScript はシングルスレッド言語です。つまり、一度に 1 行のコードを実行します。同期タスクと非同期タスクの両方をどのように処理するかを理解することは、開発者にとって重要です。技術面接ではこのトピックに関する質問がよく出てくるため、これらの概念を徹底的に把握することが重要です。

開発者が次のような関数を使用するとき setTimeout または 約束, 実行フローは、最初は少し予測できないように見えるかもしれません。ただし、明確な構造に従うことで、コードのさまざまな部分が実行される正確な順序を決定できます。これは、次のような問題に対処する場合に特に重要です。 コールバック そして イベントキュー。

この例では、JavaScript が次のような同期タスクをどのように処理するかを詳しく説明します。 コンソール.ログ そして、次のような非同期操作 setTimeout そして 約束。この説明を終えると、JavaScript のイベント ループがどのようにタスクに優先順位を付けて処理するかをより明確に理解できるようになります。

この記事は、JavaScript の実行順序を決定するのに役立つように設計されています。これは、面接の質問に取り組んだり、非同期コードをデバッグしたりするときに役立つスキルです。概念を明確に示すために実際の例を見てみましょう。

JavaScript 実行フローの探索: 同期コードと非同期コード

JavaScript では、同期コードと非同期コードの実行順序を理解することが重要であり、特に次の処理を行う場合には重要です。 setTimeout そして 約束。理解すべき重要な概念は、イベント ループが最初に同期タスクを処理し、次にキューに入れられた非同期タスクの処理に進む方法です。提供されているコード例では、最初の 2 つのログ (「A」と「F」) は同期しています。つまり、コード内に出現する順序とまったく同じ順序で実行されます。スクリプトは、実行されるとすぐに、後の処理のために setTimeout などの非同期タスクをスケジュールします。

setTimeout 関数は操作を延期する一般的な方法であり、実行フローに遅延感を生み出します。この場合、両方とも setTimeout 関数は、コンソール ログ「B」および「E」をイベント キューに追加するために使用されます。 「E」の遅延は 0 ミリ秒ですが、現在の同期操作とマイクロタスクが完了した後もキューに入れられることに注意することが重要です。この微妙な違いを理解することは、より複雑な JavaScript タスクの実行順序を決定する際に重要です。

最初の内側 setTimeout コールバックでは、ログ「B」がまだ同期タスク キューの一部であるため、ログ「B」が最初に出力され、優先されます。次に、そのコールバック内で、解決された Promise が作成されます。 約束する、解決する。これにより、ログ「D」が「B」の後、メイン イベント キュー内の他のタスクの前に発生するようにするマイクロタスクがトリガーされます。マイクロタスク キューに配置される Promise のこの動作により、2 番目の setTimeout コールバックが "E" を記録する前に "D" が記録されるようになります。したがって、マイクロタスクは標準の非同期タスクよりも優先されます。

最終的な実行順序を要約すると、「A」と「F」が同期的にログに記録され、続いて「B」が最初の setTimeout によってキューに入れられます。解決された Promise により、次に「D」がマイクロタスクとして記録されます。最後に、「E」は 2 番目の部分であるため最後に記録されます。 setTimeout 折り返し電話。同期タスク、イベント ループ、マイクロタスクを組み合わせた JavaScript の実行フローを理解することは、面接の質問に答えたり、実際のプロジェクトで非同期コードをデバッグしたりするときに非常に役立ちます。

console.log("A");
setTimeout(() => {
    console.log("B");
    Promise.resolve("C").then(() => console.log("D"));
}, 1000);
setTimeout(() => console.log("E"), 0);
console.log("F");

console.log("Start");
setTimeout(() => {
    console.log("Middle");
}, 500);
Promise.resolve().then(() => {
    console.log("Promise 1");
});
console.log("End");

JavaScript のイベント ループとタスクの優先順位付けについて詳しく知る

JavaScript の非同期動作の重要な側面は、 イベントループ、コールバック、Promise、およびその他の非同期コードの実行を処理します。このイベント ループは、コール スタックが空かどうかを常にチェックし、空であれば、コールバック キューとマイクロタスク キューからタスクを処理します。これらのキュー内でタスクの優先順位がどのように設定されているかを理解することは、特に処理時にコードが期待どおりに動作することを保証するために重要です。 setTimeout そして同時に約束する。

マイクロタスク キューはコールバック キューよりも優先されます。のようなタスク 約束の解決 つまり、setTimeout の遅延がゼロであっても、コールバック キューからの遅延タスクよりも前に実行されます。コード例では、Promise のログ「D」が 2 番目の setTimeout のログ「E」より前に実行されるのはこのためです。予期しない動作を避けるために、非同期操作を混合するコードを作成する場合、開発者がこのことを理解することが重要です。

実際のアプリケーションでは、API 呼び出しやタイマーなどの非同期操作が同期コードと頻繁にやり取りされます。イベント ループ、コールバック キュー、マイクロタスク キューがどのように機能するかを知ることで、開発者はコードの結果をより正確に予測できるようになります。これは、パフォーマンスの最適化や複雑なスクリプトのデバッグを行う場合に特に重要です。 非同期操作 と同期コードは頻繁に相互作用します。