JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでループ処理に遅延を追加する方法をわかりやすく解説

JavaScriptでループの各反復の間に遅延（待ち時間）を設けたい場合は、setTimeout() メソッドを使用します。この記事では、基本的な実装例から、より読みやすいモダンな書き方まで、コード例とともに解説します。

setTimeout()でループに遅延を追加する仕組み

setTimeout() は、指定したミリ秒後にコールバック関数を一度だけ実行するメソッドです。ループ内で単に setTimeout(fn, 2000) と書くだけでは、すべてのタイマーがほぼ同時に登録されてしまい、意図した通りの遅延になりません。

そこでポイントとなるのが、遅延時間にループカウンタを掛け算するという手法です。こうすることで、各反復に段階的な遅延を持たせることができます。

コード例

以下は、「START」ボタンをクリックすると、2秒間隔で i の値が順番に表示されるサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ループに遅延を追加する</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScriptでループに遅延を追加する</h1>
<div class="result"></div>
<button class="Btn">START</button>
<h3>上のボタンをクリックするとループが開始されます</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    BtnEle.addEventListener("click", () => {
        for (let i = 0; i < 10; i++) {
            setTimeout(function () {
                resEle.innerHTML += "i = " + i + "<br>";
            }, 2000 * i);
        }
    });
</script>
</body>
</html>

実行結果

「START」ボタンをクリックすると、各反復の後に遅延が発生しながら、i の値が2秒ごとに順番に画面へ追加されていきます。

JavaScriptでループ処理に遅延を追加する方法をわかりやすく解説

ボタンをクリックして数秒後、遅延しながら結果が順次表示されている様子：

JavaScriptでループ処理に遅延を追加する方法をわかりやすく解説

補足：async/awaitを使ったモダンな書き方

より直感的で読みやすいコードにしたい場合は、Promise と async/await を組み合わせる方法もおすすめです。

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function runLoop() {
    const resEle = document.querySelector(".result");
    for (let i = 0; i < 10; i++) {
        resEle.innerHTML += "i = " + i + "<br>";
        await sleep(2000); // 2秒待機してから次の反復へ
    }
}

document.querySelector(".Btn").addEventListener("click", runLoop);

この方法では、各反復が完了するのを待ってから次の反復に進むため、処理の流れが上から下へと自然に読めます。特に、反復ごとに非同期処理（APIリクエストなど）を含む場合には、こちらのアプローチが便利です。

まとめ

  • ループに遅延を追加する基本は setTimeout() と、遅延時間へのカウンタの掛け算。
  • 可読性を重視するなら async/await + Promise の組み合わせが有効。
  • 用途やコードの規模に応じて、最適な方法を選択しましょう。
  1. JavaScriptのコンストラクターにプロパティやメソッドを追加する方法

    JavaScriptでは、コンストラクター関数に対してprototype（プロトタイプ）を利用することで、後からプロパティやメソッドを追加することができます。この方法で追加したプロパティやメソッドは、そのコンストラクターから生成されたすべてのインスタンスで共有されるため、メモリの面でも効率的です。 サンプルコード 以下は、JavaScriptのコンストラクターにプロパティとメソッドを追加するコード例です。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta n

  2. JavaScriptで非同期ループを実装する方法をわかりやすく解説

    JavaScriptでは、async/awaitとPromiseを組み合わせることで、各処理の完了を待ちながら繰り返しを実行する「非同期ループ」を実装できます。通常のループ内で時間のかかる処理(API通信やタイマー処理など)を順番に実行したい場合に非常に便利です。以下は、JavaScriptで非同期ループを実装するコード例です。コード例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="vi