JavaScriptで指定時間後に処理を実行する方法｜setTimeoutとsetIntervalの使い分け

JavaScriptでは、一定の時間が経過した後に特定の関数を呼び出したり実行したりしたい場面がよくあります。そんなときに役立つのが、タイマー系イベントメソッドの setTimeout() と setInterval() の2つです。

この2つのメソッドには、以下のような違いがあります。

• setTimeout(): 指定したミリ秒待機した後に、関数を一度だけ実行する
• setInterval(): 指定した時間間隔ごとに、関数を繰り返し継続的に実行する

それぞれの簡単な使用例を見ていきましょう。

JavaScript setTimeout() の使用例

まずは setTimeout() から。以下のコードを、CodePenなどのコーディング環境やブラウザの開発者コンソール（F12キーで開ける「Console」タブ）に貼り付けてみてください。

setTimeout(function() {
  alert("Hello there!")
}, 3000)

ここで指定している「3000」の単位はミリ秒（ms）です。つまり、このコードは「3秒」という意味になります。ページを読み込んでから3秒後にアラートが表示され、「Hello there!」というメッセージが現れます。

なお、アロー関数を使えば次のようにより簡潔に書くこともできます。

setTimeout(() => alert("Hello there!"), 3000)

JavaScript setInterval() の使用例

続いて setInterval() です。同じように、以下のコードをコンソールに追加してみましょう。

setInterval(function() {
  alert("Hello there!")
}, 3000)

こちらのコードは、3秒ごとに何度も繰り返し実行されます。アラートが閉じられても、また3秒後に再び表示されるのが確認できるはずです。

タイマーを停止したいときは？

setInterval() で設定した繰り返し処理は、放置すると永遠に続いてしまいます。タイマーを解除するには、clearTimeout() や clearInterval() を使います。

const timerId = setInterval(function() {
  console.log("Hello there!")
}, 3000)

// タイマーを停止したいタイミングで呼び出す
clearInterval(timerId)

このように、タイマーの戻り値（ID）を変数に保存しておき、必要になった時点でクリア関数に渡すことで処理を止められます。

まとめ

• 一度だけ遅延実行したい → setTimeout()
• 一定間隔で繰り返し実行したい → setInterval()
• タイマーの解除には clearTimeout() / clearInterval() を使用

時間指定の処理は、通知表示やスライドショー、ポーリング通信など、さまざまな場面で活用できる基本テクニックです。ぜひ実際にコードを書いて挙動を確かめてみてください。