JavaScript | 1秒おきに実行する関数を実装する方法

2021-07-112021-07-13JavaScript 関数,JavaScript

JavaScript | 一秒おきに呼び出す関数を実装する方法を紹介しています。

setIntervalを使った方法

setIntervalを使った1秒おきに処理を実行する関数のサンプルコードです。

サンプルでは実行開始用にstartという関数、実行したsetInterval関数を停止する用にstopという名前の関数を作成しています。

setIntervalにて1000ミリ秒を指定することで一秒おきに処理内容が実行される関数となっています。

function start(id) {
	id = setInterval(function () {
		// 処理
	}, 1000);
}

function stop(id) {
	clearInterval(id);
}

start('id');
// stop('id');

以下のJavaScriptコードはアロー関数バージョンになります。

const start = id => {
	id = setInterval(() => {
		// 処理
	}, 1000);
};

const stop = id => {
	clearInterval(id);
}

start('id');
// stop('id');

requestAnimationFrameを使った方法

requestAnimationFrameを使って1秒おきに実行する関数を作成したサンプルコードです。

requestAnimationFrame()からcallbackを取得して1000ミリ秒で割り切れる場合に処理を実行しています。

また、requestAnimationFrame()はcancelAnimationFrame()にて処理を停止する事が可能です。

function update(callback) {
	// console.log(Math.round(callback / 10) * 10);

	if (Math.round(callback / 10) * 10 % 1000 == 0) {
		//処理
	}

	window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);
// window.cancelAnimationFrame(update);

requestAnimationFrameを使って1秒おきに実行する関数のアロー関数バージョンです。

const update = callback => {
	// console.log(Math.round(callback / 10) * 10);

	if (Math.round(callback / 10) * 10 % 1000 == 0) {
		//処理
	}

	window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);
// window.cancelAnimationFrame(update);