JavaScriptで一定時間ごとに同じ関数を繰り返し処理するsetInterval()メソッドの使い方

setInterval()メソッドで一定時間ごとに処理を繰り返す

JavaScriptで一定時間ごとに同じ関数を実行するにはsetInterval()メソッドを使います。

非常によく使うので覚えておくことをオススメします。

構文

メソッド意味
setInterval([関数],[ミリ秒])ミリ秒後に引数の関数を実行します。
setInterval()メソッド

サンプルコード

サンプルコードとして、カウントダウンタイマーを作成したいと思います。

Output
残り時間
Pug
div
		table.table
			tbody
				tr
					th 残り時間
					td#targetText
JavaScript
const targetText = document.getElementById("targetText");

const totalTime = 10000; // ミリ秒で10秒を示す
const oldTime = Date.now();

const countdownTimer = setInterval(() => {
	const currentTime = Date.now();
	const diffTime = currentTime - oldTime;
	const remainTime = Math.ceil((totalTime - diffTime) / 1000);
	if ( remainTime <= 0 ) {
		targetText.textContent = `0秒になりました。`;
		clearInterval( countdownTimer );
	} else {
		targetText.textContent = `残り${remainTime}`;
	}
}, 1000);
インストラクター
コメント

コメントを残す