JavaScriptでsetTimeoutと非同期

setTimeout・Promise・async/awaitでJavaScriptの非同期処理を学べます。初心者向けに、コードを編集して実行結果をすぐ確認できます。 下のコードはブラウザ内でそのまま実行できます。「実行エディタで開く」を押すと、progoのオンラインJavaScript実行環境にコードが読み込まれ、その場で動作を確認できます。

サンプルコード

console.log("1: 開始");

setTimeout(() => {
  console.log("3: 1秒後に実行");
}, 1000);

console.log("2: 先に実行される");

// async/await
async function main() {
  await new Promise(r => setTimeout(r, 500));
  console.log("4: awaitで待機後");
}
main();

ポイント解説

• setTimeout(関数, ミリ秒)で遅延実行します。
• 非同期処理は後回しにされ、同期処理が先に走ります。
• async/awaitで待機処理を同期的に書けます。