JavaScriptでのsettimeout関数とforループの組み合わせに関する解説

2024-02-09 11:57 JavaScript setTimeout forループ
  1. 単純なsettimeout関数の使用: settimeout関数を使用して、指定した時間後に関数を実行することができます。以下は、forループと組み合わせた例です。
for (let i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}

上記のコードでは、0から9までの数字を1秒ごとにコンソールに出力します。settimeout関数が非同期的に実行されるため、ループがすべて終了した後に関数が実行されます。

  1. IIFE（Immediately Invoked Function Expression）を使用する方法: IIFEは即時関数とも呼ばれ、関数を定義すると同時に即座に実行する方法です。以下は、IIFEを使用した例です。
for (let i = 0; i < 10; i++) {
  (function(index) {
    setTimeout(function() {
      console.log(index);
    }, 1000 * index);
  })(i);
}

上記のコードでは、即時関数内でループ変数iを引数indexに渡しています。これにより、各イテレーションで異なる値がsettimeout関数に渡されます。

  1. 非同期処理をPromiseとasync/awaitで制御する方法: Promiseとasync/awaitを使用すると、より読みやすく制御可能な非同期処理を実現できます。以下は、Promiseとasync/awaitを組み合わせた例です。
function delay(timeout) {
  return new Promise(resolve => setTimeout(resolve, timeout));
}
async function execute() {
  for (let i = 0; i < 10; i++) {
    await delay(1000);
    console.log(i);
  }
}
execute();

上記のコードでは、delay関数が指定した時間だけ待機するPromiseを返します。その後、async/awaitを使用してforループ内で非同期的に実行される処理を制御しています。

以上が、JavaScriptでsettimeout関数とforループを組み合わせる方法のいくつかです。これらの方法を使うことで、非同期処理を効果的に制御し、必要なタイミングで関数を実行することができます。