同期と非同期の JavaScript の簡略化

JavaScript はシングルスレッド言語として広く知られています。これは、単一の順序で一度に 1 つのコードのみを実行できることを意味します。ただし、非同期タスクを効率的に処理する JavaScript の機能は、インタラクティブで応答性の高いアプリケーションの構築に JavaScript が強力である理由の 1 つです。

この記事では、実際の例を使用して、同期 JavaScript と非同期 JavaScript の主な違いを説明します。

同期JavaScriptとは何ですか?

同期コードは、一度に 1 行ずつ実行されます。各操作は、前の操作が完了するまで待ってから、次の操作に進みます。

同期JavaScriptの例

console.log("Start");

// A time-consuming operation (like a loop)
for (let i = 0; i < 9; i++) {
  // Simulating a delay
}

console.log("End");

出力:

Start
End

この例では、ループによってコードの実行がブロックされます。これが現実世界のアプリケーションの場合、JavaScript が処理で忙しいため、ループ中に UI がフリーズします。

非同期JavaScriptとは何ですか?

非同期コードを使用すると、特定のタスクをバックグラウンドで実行できるため、プログラムは待たずに他のタスクを実行し続けることができます。

JavaScript は次のようなメカニズムを使用してこれを実現します。

• コールバック
• 約束
• 非同期/待機 setTimeout を使用した非同期 JavaScript の例

console.log("Start");

setTimeout(() => {
  console.log("Timeout completed");
}, 2000); // 2-second delay

console.log("End");

出力:

Start
End
Timeout completed

ここでは、setTimeout 関数が非同期で実行されます。コールバック関数が 2 秒後に実行されるようにスケジュールしますが、その間はコードの実行はブロックされません。

同期 JavaScript と非同期 JavaScript の主な違い

Feature	Synchronous	Asynchronous
Execution	Executes line by line	Tasks can run in the background
Blocking	Blocks subsequent code	Non-blocking
Examples	Loops, standard functions	Callbacks, Promises, Async/Await

非同期プログラミングでの Promise の使用

Promise を使用すると、非同期操作の処理が容易になります。以下に例を示します:

console.log("Start");

// A time-consuming operation (like a loop)
for (let i = 0; i < 9; i++) {
  // Simulating a delay
}

console.log("End");

出力:

Start
End

Async/Await: Promise のよりクリーンな構文

async キーワードと await キーワードを使用すると、Promises の操作が簡素化されます。

console.log("Start");

setTimeout(() => {
  console.log("Timeout completed");
}, 2000); // 2-second delay

console.log("End");

出力:

Start
End
Timeout completed

結論

効率的でノンブロッキングなアプリケーションを構築するには、同期 JavaScript と非同期 JavaScript の違いを理解することが重要です。 Promise や Async/Await などの非同期パターンを使用して、スムーズなユーザー エクスペリエンスを確保します。

ご質問や共有したい例がございましたら、お気軽に以下にコメントを残してください!

以上が同期と非同期の JavaScript の簡略化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。