setInterval() / clearInterval()

// 一定間隔で関数を繰り返し実行します。
var timerID = setInterval(関数, ミリ秒);

// 繰り返しを停止します。
clearInterval(timerID);

タイマーを識別するための数値IDを返します。このIDを『clearInterval()』に渡すことで、繰り返しを停止できます。

sample_setInterval.html

<p id="counter">0</p>
<button id="startBtn">スタート</button>
<button id="stopBtn">ストップ</button>
<p id="output"></p>

sample_setInterval.js

// パターン1: ボタンで開始・停止できるカウンター
var counter = document.getElementById("counter");
var startBtn = document.getElementById("startBtn");
var stopBtn = document.getElementById("stopBtn");
var output = document.getElementById("output");
var timerID = null;

startBtn.addEventListener("click", function() {
	if (timerID !== null) { return; } // すでに動いている場合は何もしません。
	timerID = setInterval(function() {
		counter.textContent = Number(counter.textContent) + 1;
	}, 1000);
	output.textContent = "カウント中...";
});

stopBtn.addEventListener("click", function() {
	clearInterval(timerID); // タイマーを停止します。
	timerID = null;
	output.textContent = "停止しました";
});

sample_setInterval.js

// パターン2: 条件付きで自動停止するカウントアップ
var count = 0;
var id = setInterval(function() {
	count++;
	console.log("カウント: " + count);
	if (count >= 5) {
		clearInterval(id); // 5回目で停止します。
		console.log("タイマーを停止しました");
	}
}, 1000);

カウント: 1
カウント: 2
カウント: 3
カウント: 4
カウント: 5
タイマーを停止しました

sample_setInterval.js

// パターン3: requestAnimationFrame()を使ったスムーズなアニメーション
var position = 0;
var box = document.getElementById("box");

function animate() {
	position += 2;
	box.style.left = position + "px"; // 2pxずつ右に移動します。
	if (position < 300) {
		requestAnimationFrame(animate); // 次のフレームで再度実行されます。
	}
}
requestAnimationFrame(animate);

サンプルページはこちら

『setInterval()』は指定したミリ秒ごとに関数を繰り返し実行するタイマー関数です。カウントダウンタイマーや、定期的なデータ更新、スライドショーの自動切り替えなどによく使われます。

『clearInterval()』を呼ばない限り処理は永久に繰り返されるため、必ず停止条件を設けてください。ページを離れても内部でタイマーが動き続け、メモリリークの原因になることがあります。

アニメーション用途の場合は『setInterval()』よりも『requestAnimationFrame()』の使用をおすすめします。『requestAnimationFrame()』はブラウザの画面描画タイミングに同期するため、60fpsの滑らかなアニメーションが実現でき、タブが非表示の場合は自動的に処理を停止してくれます。1回だけ遅延実行したい場合は『setTimeout()』を使用してください。