JavaScriptのsetTimeout活用術10選

はじめに

この記事を読めば、JavaScriptのsetTimeoutを使った10の活用術が身につくようになります。

setTimeoutは非常に便利な機能で、Webページ上で遅延実行や一定間隔で繰り返す処理を実現できます。

初心者の方にも分かりやすいよう、使い方や応用例、注意点などを丁寧に解説していきますので、ぜひ最後までお読みください。

●JavaScriptのsetTimeoutとは

setTimeoutは、JavaScriptで特定の処理を一定時間後に実行するための関数です。

これにより、処理を遅延させたり、一定間隔で繰り返すことが可能になります。

○setTimeoutの基本

setTimeout関数の基本構文は次のようになります。

setTimeout(関数, 時間);

ここで、関数は実行したい処理を記述し、時間は遅延させる時間をミリ秒単位で指定します。

●setTimeoutの使い方

それでは、setTimeoutの使い方を具体的なサンプルコードを交えながら見ていきましょう。

○サンプルコード1：遅延実行の基本

このコードでは、setTimeoutを使ってアラートを3秒後に表示する処理を実行しています。

setTimeout(function() {
  alert('3秒後に表示されます');
}, 3000);

○サンプルコード2：ループで繰り返し実行

この例では、1秒ごとにカウントアップする処理を実行しています。

let count = 0;

function countUp() {
  console.log(count++);
  setTimeout(countUp, 1000);
}

countUp();

○サンプルコード3：条件付きで遅延実行を止める

このコードでは、カウントが5になった時点で遅延実行を止める処理を実行しています。

let count = 0;

function countUp() {
  if (count < 5) {
    console.log(count++);
    setTimeout(countUp, 1000);
  }
}

countUp();

○サンプルコード4：スライドショー

このコードでは、setTimeoutを使用して定期的に画像を切り替えるスライドショーを実現しています。

画像は配列で管理し、現在のインデックスを更新して表示する画像を切り替えています。

const images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
let currentIndex = 0;

function changeImage() {
  const img = document.getElementById('slideshow');
  img.src = images[currentIndex];
  currentIndex = (currentIndex + 1) % images.length;
  setTimeout(changeImage, 3000);
}

changeImage();

○サンプルコード5：テキストアニメーション

この例では、テキストを1文字ずつ順番に表示するアニメーションを実現しています。

setTimeoutを使って、指定した間隔で次の文字を表示させます。

const text = 'こんにちは、世界!';
let currentIndex = 0;

function showText() {
  if (currentIndex < text.length) {
    const target = document.getElementById('target');
    target.textContent += text.charAt(currentIndex);
    currentIndex++;
    setTimeout(showText, 500);
  }
}

showText();

○サンプルコード6：遅延ロード

このコードでは、画像の遅延ロード（Lazy Load）を実装しています。

画像が表示される直前になってから読み込むことで、ページの読み込み速度を改善します。

function loadImage(element) {
  const img = new Image();
  img.src = element.getAttribute('data-src');
  img.onload = function() {
    element.src = img.src;
    element.removeAttribute('data-src');
  };
}

function checkImages() {
  const images = document.querySelectorAll('img[data-src]');
  images.forEach((image) => {
    const rect = image.getBoundingClientRect();
    if (rect.top <= window.innerHeight) {
      loadImage(image);
    }
  });
}

window.addEventListener('scroll', () => {
  setTimeout(checkImages, 200);
});

checkImages();

○サンプルコード7：通知の自動消去

この例では、setTimeoutを使って指定した時間が経過したら通知を自動的に消去する処理を実装しています。

function showNotification(message, duration) {
  const notification = document.createElement('div');
  notification.className = 'notification';
  notification.textContent = message;
  document.body.appendChild(notification);

  setTimeout(function() {
    notification.remove();
  }, duration);
}

showNotification('これは通知です。5秒後に消えます。', 5000);

○サンプルコード8：入力値検証の遅延実行

このコードでは、入力値の検証を遅延実行することで、ユーザーが入力を終えるまで検証を実行しないようにしています。

clearTimeoutを使って、入力が終わるまで検証処理をキャンセルし、最後の入力後に遅延実行させます。

let validationTimer;

function validateInput() {
  clearTimeout(validationTimer);
  validationTimer = setTimeout(function() {
    const input = document.getElementById('input');
    const message = document.getElementById('message');
    if (input.value === '') {
      message.textContent = '入力してください';
    } else {
      message.textContent = '入力値が正しいです';
    }
  }, 1000);
}

document.getElementById('input').addEventListener('input', validateInput);

○サンプルコード9：データの自動更新

この例では、setTimeoutを使って一定間隔でデータを自動更新する処理を実現しています。

function updateData() {
  // ここでデータの取得や更新処理を実行します。
  console.log('データが更新されました');
  setTimeout(updateData, 5000);
}

updateData();

○サンプルコード10：画面スクロールの遅延実行

このコードでは、画面スクロール時に遅延実行を利用し、一定時間スクロールが止まったら処理を実行する例を紹介しています。

let scrollTimer;

function onScrollEnd() {
  console.log('スクロールが終了しました');
}

window.addEventListener('scroll', function() {
  clearTimeout(scrollTimer);
  scrollTimer = setTimeout(onScrollEnd, 500);
});