繰り返しタイマーの基本 — const id = setInterval(()=>{}, 1000)
setInterval は「一定間隔ごとに関数を繰り返し実行する」ためのタイマーです。第2引数はミリ秒単位で指定し、1000ms = 1秒ごとに処理が走ります。
基本の使い方
// 1秒ごとに「tick」を表示
const id = setInterval(() => {
console.log("tick");
}, 1000);
- 役割: 指定した間隔で繰り返し処理を実行。
- 戻り値: タイマーID。
clearInterval(id)で停止可能。 - 単位: 1000ms = 1秒。
よく使うテンプレート集
1) カウントアップ
let count = 0;
const id = setInterval(() => {
count++;
console.log(count);
if (count >= 5) clearInterval(id); // 5回で停止
}, 1000);
- ポイント: 条件を満たしたら
clearIntervalで止める。
2) 時計表示
const id = setInterval(() => {
const now = new Date();
console.log(now.toLocaleTimeString());
}, 1000);
- ポイント: 1秒ごとに現在時刻を表示。簡易時計に。
3) アニメーション的な処理
let pos = 0;
const id = setInterval(() => {
pos += 10;
box.style.left = pos + "px";
if (pos > 200) clearInterval(id);
}, 100);
- ポイント: DOM操作と組み合わせて「動き」を作れる。
4) ボタンで開始・停止
let id = null;
startBtn.onclick = () => {
if (!id) {
id = setInterval(() => console.log("running..."), 1000);
}
};
stopBtn.onclick = () => {
if (id) {
clearInterval(id);
id = null;
}
};
- ポイント: IDを保持して、開始と停止を制御。
実務でのパターンとコツ
- 繰り返し処理: 自動保存、定期ポーリング、UI更新などに便利。
- 停止忘れに注意: ページ遷移やコンポーネント破棄時に
clearIntervalを忘れると無駄に動き続ける。 - 負荷管理: 短い間隔で大量処理するとCPU負荷が高い。必要な間隔を見極める。
- 代替: 「処理終了後に次回を予約」するなら
setTimeoutの再帰呼び出しが有効。処理時間のブレに強い。
よくある落とし穴と対策
- 秒とミリ秒の勘違い: 1秒は 1000。
setInterval(..., 1)は1msごとで負荷大。 - 停止しない: IDを保存せず
clearIntervalできない。必ず変数に保持。 - 複数予約: 連打で複数タイマーが走り、処理が重複。開始前に既存を止める。
- 非同期処理の詰まり: 間隔より処理時間が長いと重なって実行。
setTimeout再帰で調整可能。
練習問題（手を動かして覚える）
// 1) 2秒ごとに「Hello」を3回表示して停止
let n = 0;
const id1 = setInterval(() => {
console.log("Hello");
if (++n >= 3) clearInterval(id1);
}, 2000);
// 2) 1秒ごとに現在時刻を表示
const id2 = setInterval(() => {
console.log(new Date().toLocaleTimeString());
}, 1000);
// 3) ボタンで開始・停止
let id3 = null;
function start() {
if (!id3) id3 = setInterval(() => console.log("動作中"), 1000);
}
function stop() {
if (id3) { clearInterval(id3); id3 = null; }
}
// 4) 再帰的setTimeoutで同じ動作（詰まり防止）
function tick() {
console.log("tick");
setTimeout(tick, 1000);
}
setTimeout(tick, 1000);
直感的な指針
- 繰り返しは setInterval、1回だけは setTimeout。
- 停止は clearInterval。IDを必ず保持。
- 負荷や停止忘れに注意。
- 処理時間が長いなら再帰的 setTimeout で安定。
👉 初心者は「1秒ごとに処理 → clearIntervalで止める」という流れをまず覚えると、繰り返しタイマーの基本がすぐ理解できます。