setInterval() / clearInterval()

指定した時間間隔で処理を繰り返し実行します。『clearInterval()』で繰り返しを停止できます。

構文

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

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

引数

引数	概要
関数	繰り返し実行されるコールバック関数を指定します。
ミリ秒	実行間隔をミリ秒で指定します。1000ミリ秒が1秒です。

戻り値

タイマーを識別するための数値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);

setInterval()とrequestAnimationFrame()の違い

メソッド	概要
setInterval()	指定した時間間隔で処理を繰り返します。カウントダウンや定期的なデータ取得など、一定間隔の処理に適しています。
requestAnimationFrame()	ブラウザの画面描画に合わせて処理を実行します。通常は1秒間に60回呼び出されるため、滑らかなアニメーションに最適です。タブが非表示の場合は自動的に停止し、パフォーマンスに優れています。

概要

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

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

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