JavaScriptのタイマーまとめ【setInterval / setTimeout】

setInterval()

指定した時間間隔ごとに処理を繰り返す。

setInterval(() => {
  console.log('1秒ごとに実行');
}, 1000);

使う場面：時計の表示、アニメーション処理、定期的なチェックなど。

setTimeout()

指定した時間後に一度だけ処理を実行。

setTimeout(() => {
  console.log('3秒後に実行');
}, 3000);

使う場面：一定時間後に処理をしたいとき（例：モーダルを閉じる、アラート表示など）

カウントダウンの実装例

let count = 10;
const timerId = setInterval(() => {
  console.log(count);
  count--;
  if (count < 0) {
    clearInterval(timerId);
    console.log('終了！');
  }
}, 1000);

clearInterval() で止めるのがポイント！

clearInterval()

setInterval() の処理を止めるときに使う。

const id = setInterval(() => console.log('動作中'), 500);
setTimeout(() => clearInterval(id), 3000); // 3秒後に停止

setTimeout()の中でsetTimeout()を使う（再帰タイマー）

function showTime() {
  console.log(new Date().toLocaleTimeString());
  setTimeout(showTime, 1000); // 自分自身を再び呼び出す
}
showTime();

これで「setInterval()」と同じような動きを再現できる。
ただし setTimeout() を使うことで、処理が重くてもズレにくいというメリットがある！

再帰関数とは？

関数の中で自分自身を呼び出す関数。
上の showTime() のように、setTimeout(showTime, 1000) で自分を再度呼んでいるのが「再帰処理」。
一見難しそうだけど、「自分でループを作る」イメージ。

setInterval() と setTimeout() の違い

比較項目	setInterval()	setTimeout()
実行回数	繰り返し実行	1回だけ
処理のズレ	起こりやすい	起こりにくい
停止方法	clearInterval()	clearTimeout()
適した用途	定期的な監視	正確な繰り返し・タイミング調整

setTimeout() を使うメリット

• 処理が正確な間隔で動く（遅延してもズレにくい）
• タイマーの制御が柔軟
• async/await と組み合わせやすい

clearTimeout()

setTimeout() を止めるときに使う。

const id = setTimeout(() => console.log('動くはずだった！'), 5000);
clearTimeout(id); // → 実行されない

タイマーを「止める」「再開する」実装例

main.js

{
  const pElement = document.querySelector('p');
  const startButton = document.querySelector('.start');
  const stopButton = document.querySelector('.stop');
  let timeoutId;
  let isRunning = false;

  function showClock() {
    pElement.textContent = new Date().toLocaleTimeString();
    timeoutId = setTimeout(showClock, 1000); // 再帰的に呼ぶ
  }

  startButton.addEventListener('click', () => {
    if (!isRunning) {
      isRunning = true;
      showClock();
    }
  });

  stopButton.addEventListener('click', () => {
    clearTimeout(timeoutId);
    isRunning = false;
  });
}

html

<p></p>
<button class="start">スタート</button>
<button class="stop">ストップ</button>

まとめ

用語	意味	停止方法
setInterval()	一定間隔で繰り返し	clearInterval()
setTimeout()	一定時間後に1回だけ	clearTimeout()
再帰 + setTimeout	ズレの少ない繰り返し	clearTimeout()
Date()	現在の日時を取得	-

「setTimeoutを再帰的に使えばズレが少ない」と説明するのは正確ではなく、
「setTimeoutを再帰的に使えば、ズレを自分で調整できる（補正できる）」が正しいです。