🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

JavaScript setTimeout の使い方【初心者向け徹底解説】

指定した時間差で処理を実行したいときに使える、JavaScriptの基本関数です。

⏰ ライブデモ：setTimeoutを体感する

下のボタンをクリックすると、3秒後にメッセージが表示されます。

基本的な使い方（部分コード）

setTimeoutの基本的な構文は非常にシンプルです。実行したい処理（関数）と、遅延させたい時間（ミリ秒）を指定するだけです。

// 3000ミリ秒（＝3秒）後に、アラートを表示する
setTimeout(() => {
  alert("3秒が経過しました！");
}, 3000);

コピペで動く！完全なHTMLサンプル

以下のコードをHTMLファイルとして保存すれば、すぐに動作を確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>setTimeoutのデモ</title>
</head>
<body>

  <h1>setTimeoutテスト</h1>
  <p>ページを開いてから5秒後にメッセージが表示されます。</p>

  <script>
    setTimeout(() => {
      // ページ内の要素を書き換えることもできます
      const messageDiv = document.createElement('div');
      messageDiv.textContent = '🎉 5秒経ちました！';
      document.body.appendChild(messageDiv);
    }, 5000); // 5000ミリ秒 = 5秒
  </script>

</body>
</html>

メリットとデメリット

  • メリット：
    • ✅ 構文が非常にシンプルで、初心者でも簡単に使える。
    • ✅ 処理を遅らせることで、UIのブロッキングを防ぎ、ユーザー体験を向上させられる。
    • ✅ アニメーションやフィードバック表示など、幅広い用途に活用できる。
  • デメリット：
    • ❌ 一度しか実行されない。（繰り返し実行したい場合は`setInterval`を使う）
    • ❌ 指定した時間が正確に保証されるわけではない。（あくまで「最低」の待機時間）
    • ❌ 複雑な処理をネスト（入れ子に）すると、コードが読みにくくなることがある（コールバック地獄）。

実践的な使いどころ

setTimeoutは単純な遅延実行だけでなく、実際のウェブ開発で様々な場面で役立ちます。

主な活用例

  • フォーム送信後などのフィードバックメッセージを数秒間表示して消す。
  • ユーザーが入力を止めてから少し待って、検索候補を表示する。
  • ページの読み込み完了後、少し間を置いてからアニメーションを開始する。
  • 重い処理を小さなタスクに分割し、UIが固まるのを防ぐ。

よくある質問（Q&A）

Q: 0ミリ秒を指定したらどうなりますか？

A: すぐに実行されるわけではありません。現在の処理がすべて完了した後、可能な限り早くタスクキューに追加され実行されます。重い処理を分割してブラウザに応答の機会を与える、高度なテクニックとして使われることがあります。

Q: `setInterval`との違いは何ですか？

A: `setTimeout`は指定した時間後に「一度だけ」実行されます。一方、`setInterval`は指定した時間ごとに「繰り返し」実行されます。繰り返し処理を止めたい場合は`clearInterval`を使います。

Q: 実行前にキャンセルできますか？

A: はい、可能です。`const timerId = setTimeout(...)`のようにタイマーIDを保存しておき、`clearTimeout(timerId)`を呼び出すことで、実行前にタイマーをキャンセルできます。

まとめ

setTimeoutは、JavaScriptにおける非同期処理の第一歩とも言える、シンプルかつ強力な関数です。ユーザー体験を向上させるためのちょっとした演出から、パフォーマンスチューニングまで、その用途は多岐にわたります。まずは基本的な使い方をマスターし、様々な場面で活用してみてください。