【JavaScript】setInterval の使い方｜一定間隔で繰り返し実行・clearInterval で停止・setTimeout との違い・実務パターンまで解説

const intervalId = setInterval(callback, delay, arg1, arg2, ...);
// callback: 繰り返し実行する関数
// delay:    実行間隔（ミリ秒）。1000 = 1秒
// arg1...:  callback に渡す引数（省略可）
// 戻り値:   タイマーID（clearInterval で停止に使う）

let count = 0;

const intervalId = setInterval(() => {
  count++;
  console.log(count);
}, 1000);

// 出力: 1, 2, 3, 4, 5, ...（1秒ごと）

let count = 0;

const intervalId = setInterval(() => {
  count++;
  console.log(count);

  // 5回実行したら停止
  if (count >= 5) {
    clearInterval(intervalId);
    console.log("停止しました");
  }
}, 1000);

// 出力: 1, 2, 3, 4, 5, "停止しました"

let intervalId = null;

document.getElementById("startBtn").addEventListener("click", () => {
  // 二重起動を防止
  if (intervalId !== null) return;

  intervalId = setInterval(() => {
    console.log("実行中:", new Date().toLocaleTimeString());
  }, 1000);
});

document.getElementById("stopBtn").addEventListener("click", () => {
  clearInterval(intervalId);
  intervalId = null;
});

// 1秒間隔で実行（処理時間が長いと次の実行が詰まる可能性あり）
setInterval(() => {
  heavyProcess(); // 処理に300msかかる場合
}, 1000);
// 実際の間隔: 1000ms → 次の実行開始は700ms後

function repeat() {
  heavyProcess(); // 処理に300msかかる場合
  setTimeout(repeat, 1000);
}
repeat();
// 実際の間隔: 処理300ms + 待機1000ms = 1300ms

async function pollApi() {
  try {
    const res = await fetch("/api/status");
    const data = await res.json();
    console.log("ステータス:", data.status);

    if (data.status !== "complete") {
      // 処理完了後に5秒後に再実行
      setTimeout(pollApi, 5000);
    }
  } catch (error) {
    console.error("エラー:", error);
    // エラー時も再試行
    setTimeout(pollApi, 10000);
  }
}

pollApi();

import { useEffect, useState } from "react";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);

    // クリーンアップ: コンポーネント破棄時に停止
    return () => clearInterval(id);
  }, []);

  return <p>{count}秒経過</p>;
}

// ページを離れるときにタイマーを停止
let intervalId = setInterval(doSomething, 1000);

window.addEventListener("beforeunload", () => {
  clearInterval(intervalId);
});

function countdown(seconds, onTick, onComplete) {
  let remaining = seconds;
  onTick(remaining);

  const id = setInterval(() => {
    remaining--;
    onTick(remaining);

    if (remaining <= 0) {
      clearInterval(id);
      onComplete();
    }
  }, 1000);

  return id; // 外部から停止可能
}

// 使用例: 10秒カウントダウン
countdown(
  10,
  (sec) => console.log(`残り${sec}秒`),
  () => console.log("タイムアップ！")
);

function startClock(elementId) {
  const el = document.getElementById(elementId);

  function update() {
    el.textContent = new Date().toLocaleTimeString("ja-JP");
  }

  update(); // 初回即時表示
  return setInterval(update, 1000);
}

const clockId = startClock("clock");
// 停止: clearInterval(clockId);

const slides = document.querySelectorAll(".slide");
let current = 0;

function showSlide(index) {
  slides.forEach(s => s.classList.remove("active"));
  slides[index].classList.add("active");
}

// 3秒ごとに次のスライドに切り替え
const slideInterval = setInterval(() => {
  current = (current + 1) % slides.length;
  showSlide(current);
}, 3000);

// マウスホバーで一時停止
const container = document.querySelector(".slideshow");
container.addEventListener("mouseenter", () => clearInterval(slideInterval));

let isPolling = true;

async function pollNotifications() {
  if (!isPolling) return;

  try {
    const res = await fetch("/api/notifications");
    const data = await res.json();

    if (data.length > 0) {
      renderNotifications(data);
    }
  } catch (e) {
    console.error("通知取得エラー:", e);
  }

  // 30秒後に再実行
  setTimeout(pollNotifications, 30000);
}

pollNotifications();
// 停止: isPolling = false;