JavaScript sleepを簡単に理解！使い方10選

はじめに
●JavaScriptのsleep関数とは
- ○sleep関数の仕組み
●JavaScript sleepの使い方
- ○サンプルコード1：基本的なsleep関数の使い方
- ○サンプルコード2：非同期処理でのsleep関数の使い方
●sleep関数を使った応用例
●注意点と対処法
●カスタマイズ方法
- ランダムな待機時間の設定
- 条件付きの待機
まとめ

はじめに

この記事を読めば、JavaScriptのsleep関数を簡単に理解し、使い方ができるようになります。

sleep関数はプログラムの一時停止を行うためのもので、様々な場面で活用できます。

初心者向けに分かりやすく解説し、使い方のサンプルコードや注意点、カスタマイズ方法を紹介します。

●JavaScriptのsleep関数とは

JavaScriptには元々sleep関数が存在しませんが、setTimeoutやPromiseを使って独自に実装することができます。

sleep関数は、指定した時間だけプログラムの実行を一時停止させるためのものです。

○sleep関数の仕組み

JavaScriptでsleep関数を実装するには、setTimeout関数とPromiseを組み合わせることが一般的です。

setTimeoutは、指定した時間が経過した後に関数を実行するためのもので、Promiseは非同期処理の結果を表現するためのものです。

これらを組み合わせることで、指定した時間だけプログラムを一時停止させることができます。

●JavaScript sleepの使い方

ここでは、基本的なsleep関数の使い方と非同期処理での使い方を紹介します。

○サンプルコード1：基本的なsleep関数の使い方

このコードでは、PromiseとsetTimeoutを使ってsleep関数を実装し、2秒間の一時停止を行っています。

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function main() {
  console.log("処理開始");
  await sleep(2000);
  console.log("2秒後の処理");
}

main();

○サンプルコード2：非同期処理でのsleep関数の使い方

このコードでは、非同期処理の中でsleep関数を使って1秒ごとにデータを表示しています。

async function fetchData() {
  const data = [1, 2, 3, 4, 5];
  
  for (const item of data) {
    console.log(item);
    await sleep(1000);
  }
}

fetchData();

●sleep関数を使った応用例

ここでは、さまざまなシーンでsleep関数を活用する例を紹介します。

○サンプルコード3：画像のスライドショー

このコードでは、sleep関数を利用して一定時間ごとに画像が切り替わるスライドショーを実現しています。

この例では、画像の配列を用意し、whileループとsleep関数を使って画像を順番に表示しています。

// 画像の配列
const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
let currentIndex = 0;

async function slideShow() {
  while (true) {
    const imgElement = document.getElementById("slideshow");
    imgElement.src = images[currentIndex];
    currentIndex = (currentIndex + 1) % images.length;
    await sleep(3000);
  }
}

slideShow();

○サンプルコード4：APIからのデータ取得時の待機

このコードでは、APIからデータを取得する際に、sleep関数を使ってリクエスト間隔をあける方法を紹介しています。

この例では、APIを連続して呼び出さないために、sleep関数で待機してから次のリクエストを送信しています。

async function fetchApiData() {
  const urls = ["https://api.example.com/data1", "https://api.example.com/data2", "https://api.example.com/data3"];

  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
    await sleep(2000);
  }
}

fetchApiData();

○サンプルコード5：ボタン押下時のアニメーション

このコードでは、ボタンが押されたときにアニメーションを実行し、sleep関数を使ってアニメーションの途中で一時停止させる方法を紹介しています。

この例では、ボタンをクリックすると、テキストの色が変わり、一定時間後に元に戻ります。

const button = document.getElementById("button");
const textElement = document.getElementById("text");

button.addEventListener("click", async () => {
  textElement.style.color = "red";
  await sleep(2000);
  textElement.style.color = "black";
});

○サンプルコード6：一定時間ごとの自動更新

このコードでは、sleep関数を利用して一定時間ごとにデータを自動更新する方法を紹介しています。

この例では、3秒ごとにデータを取得し、表示を更新しています。

async function autoUpdateData() {
  while (true) {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
    await sleep(3000);
  }
}

autoUpdateData();

○サンプルコード7：連続クリック防止

このコードでは、ボタンが連続してクリックされるのを防ぐために、sleep関数を使ってクリックを無効化する期間を設けています。

この例では、ボタンがクリックされた後、2秒間ボタンを無効にして、連続クリックを防いでいます。

const button = document.getElementById("button");
let isDisabled = false;

button.addEventListener("click", async () => {
  if (isDisabled) {
    return;
  }
  isDisabled = true;
  console.log("ボタンがクリックされました。");
  await sleep(2000);
  isDisabled = false;
});

○サンプルコード8：データの順次表示

このコードでは、sleep関数を利用して、データを順番に表示させる方法を紹介しています。

この例では、1秒ごとに配列内のデータを順番に表示しています。

const data = ["データ1", "データ2", "データ3", "データ4", "データ5"];

async function displayDataSequentially() {
  for (const item of data) {
    console.log(item);
    await sleep(1000);
  }
}

displayDataSequentially();

○サンプルコード9：画面遷移時の待機

このコードでは、画面遷移前にsleep関数を使って一定時間待機させる方法を紹介しています。

この例では、ボタンがクリックされた後、3秒間待機してから画面遷移を実行しています。

const button = document.getElementById("button");

button.addEventListener("click", async () => {
  console.log("画面遷移の準備を開始します。");
  await sleep(3000);
  location.href = "https://www.example.com";
});

○サンプルコード10：計算処理の途中での待機

このコードでは、計算処理の途中でsleep関数を使って一定時間待機させる方法を紹介しています。

この例では、計算処理の途中で1秒間待機してから、計算を再開しています。

async function calculationWithWait() {
  console.log("計算を開始します。");
  const result1 = 5 * 10;
  console.log("途中結果:", result1);
  await sleep(1000);
  const result2 = result1 + 20;
  console.log("最終結果:", result2);
}

calculationWithWait();