setTimeout 使いどころ？

JavaScript で非同期処理を行う setTimeout は、Web 開発において様々な場面で活躍する関数です。この記事では、setTimeout の基本的な使い方から、実際の使用例、注意点まで詳しく解説していきます。

setTimeout の基本

setTimeout() 関数は、指定したミリ秒後に一度だけ関数やコードを実行するタイマーを設定します。基本的な構文は以下の通りです。

setTimeout(function() {
  // 実行したい処理
}, ミリ秒);

例えば、3 秒後にアラートを表示する場合は以下のようになります。

setTimeout(function() {
  alert('3 秒が経過しました！');
}, 3000); // 3000ミリ秒 = 3秒

setTimeout の使いどころ

setTimeout は、以下のようなケースで特に役立ちます。

用途	説明
ゲーム開発	特定のイベント後、時間差で別のイベントを発生させる。例えば、アイテム取得後、数秒後に効果を発動させるなど。
Webサイト上のアニメーション	画像のスライドショー、タイピングアニメーションなど、時間経過とともに変化する表現を実現する。
画面遷移の遅延	ローディング画面を表示した後、一定時間後に目的のページへ遷移させる。
ポップアップ表示	ページ読み込み後、数秒後にクーポン情報などを表示するポップアップを表示する。
ユーザー入力の遅延処理	検索フォームなどで、ユーザーが入力する度にリクエストを送信するのではなく、一定時間入力が途絶えてから処理を実行する。

使用例

例1: 画像のスライドショー

<!DOCTYPE html>
<html>
<head>
<title>画像スライドショー</title>
<style>
  #slideshow {
    width: 300px;
    height: 200px;
    overflow: hidden;
  }
  #slideshow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
</head>
<body>

<div id="slideshow">
  <img src="image1.jpg" alt="画像1">
</div>

<script>
  const slideshow = document.getElementById('slideshow');
  const images = ["image2.jpg", "image3.jpg", "image1.jpg"]; // 画像ファイル名
  let currentImageIndex = 0;

  function changeImage() {
    currentImageIndex = (currentImageIndex + 1) % images.length;
    slideshow.querySelector('img').src = images[currentImageIndex];
  }

  setInterval(changeImage, 3000); // 3秒ごとに画像を切り替え
</script>

</body>
</html>

例2: 画面遷移の遅延

<!DOCTYPE html>
<html>
<head>
<title>画面遷移の遅延</title>
</head>
<body>

<p>3秒後に別のページへ遷移します。</p>

<script>
  setTimeout(function() {
    window.location.href = "https://www.example.com"; // 遷移先のURL
  }, 3000);
</script>

</body>
</html>

注意点

setTimeout は指定した時間が経過した後、**処理の実行が保証される** わけではありません。他の処理が詰まっている場合は、遅延が発生する可能性があります。
setTimeout の実行をキャンセルする場合は、clearTimeout() 関数を使用します。clearTimeout には、setTimeout の返り値を渡す必要があります。

参考資料

WindowOrWorkerGlobalScope.setTimeout - Web API | MDN

Q&A

Q1: setTimeout と setInterval の違いは何ですか？

setTimeout は指定時間後に一度だけ処理を実行するのに対し、setInterval は指定時間ごとに処理を繰り返し実行します。

Q2: setTimeout の時間を正確に制御することはできますか？

setTimeout は、あくまで指定時間後に処理を実行するようブラウザに依頼するものであり、正確な時間制御は保証されません。特に、CPU負荷が高い場合や、他の処理が詰まっている場合は遅延が発生する可能性があります。

Q3: setTimeout を使ったアニメーションは、requestAnimationFrame と比べてどのような点が劣りますか？

setTimeout を使ったアニメーションは、requestAnimationFrame と比べて滑らかさに欠ける可能性があります。requestAnimationFrame は、ブラウザの描画タイミングに合わせて処理を実行するため、より滑らかなアニメーションを実現できます。

その他の参考記事:jquery setinterval