setInterval() / clearInterval()

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

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

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

// 1秒ごとにカウントアップする例
var count = 0;
var timerID = setInterval(function() {
	count++;
	console.log("カウント: " + count);
	if (count >= 5) {
		clearInterval(timerID); // 5回目で停止します。
		console.log("タイマーを停止しました");
	}
}, 1000);

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

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

1つ目のコードを実行すると、コンソールには以下のように出力されます。

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

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

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

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