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

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

JavaScriptでは、async/awaitとPromiseを組み合わせることで、各処理の完了を待ちながら繰り返しを実行する「非同期ループ」を実装できます。通常のループ内で時間のかかる処理(API通信やタイマー処理など)を順番に実行したい場合に非常に便利です。

以下は、JavaScriptで非同期ループを実装するコード例です。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScriptにおける非同期ループ</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると非同期ループが開始されます</h3>
<script>
    let resEle = document.querySelector(".result");
    async function waitTime(time) {
        return new Promise((resolve) => {
            setTimeout(resolve, time);
        });
    }
    async function someFunction() {
        for (let i = 0; i < 10; i++) {
            await waitTime(2000);
            resEle.innerHTML += "i = " + i + "<br>";
        }
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        someFunction();
    });
</script>
</body>
</html>

コードの解説

1. 待機処理を行う関数(waitTime)

waitTime()関数は、指定したミリ秒後に解決(resolve)されるPromiseを返します。setTimeoutをPromiseでラップすることで、awaitを使って処理を一時停止できるようになります。

2. 非同期ループ本体(someFunction)

someFunction()はasync関数として定義されており、forループの中でawait waitTime(2000)を呼び出しています。これにより、各反復ごとに2秒間待機してから、現在のカウント値を画面に表示します。

3. ボタンクリックで実行

ボタンがクリックされるとイベントリスナー経由でsomeFunction()が呼び出され、非同期ループが開始されます。

実行結果

「CLICK HERE」ボタンをクリックすると、2秒おきに「i = 0」から「i = 9」までの値が順番に表示されます。

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

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

ポイントまとめ

  • awaitはasync関数内でのみ使用できます。
  • ループ内でawaitを使うと、各反復が完了するまで次の反復に進みません。
  • この仕組みにより、APIリクエストを連続的に送信する際のレート制限対策などにも活用できます。
  • なお、配列のforEachはawaitを待たないため、非同期処理にはforループやfor...ofを使用するのが安全です。
  1. JavaScriptでループ処理に遅延を追加する方法をわかりやすく解説

    JavaScriptでループの各反復の間に遅延（待ち時間）を設けたい場合は、setTimeout() メソッドを使用します。この記事では、基本的な実装例から、より読みやすいモダンな書き方まで、コード例とともに解説します。 setTimeout()でループに遅延を追加する仕組み setTimeout() は、指定したミリ秒後にコールバック関数を一度だけ実行するメソッドです。ループ内で単に setTimeout(fn, 2000) と書くだけでは、すべてのタイマーがほぼ同時に登録されてしまい、意図した通りの遅延になりません。 そこでポイントとなるのが、遅延時間にループカウンタを掛け算するという手法

  2. JavaScriptでオブジェクトを含む「配列の配列」をループ処理する方法

    JavaScriptでオブジェクトを含む多次元配列をループするには？JavaScriptでは、オブジェクトを含む配列の配列（入れ子構造の配列）をループ処理する際、forEach()メソッドをネストして使用し、さらにfor...inループで各オブジェクトのプロパティにアクセスするのが一般的な方法です。以下に、具体的な実装例を紹介します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device