JavaScript | setInterval()で一定の時間隔で処理を繰り返す方法（関数呼び出し、無名関数）

2023-02-092023-02-19JavaScript 制御,JavaScript

JavaScriptのsetInterval()メソッドで一定の時間隔で処理を繰り返す処理を実装するサンプルコードを関数呼び出し、無名関数での実行ともに紹介しています。

setInterval()で一定の時間隔で処理を繰り返す 関数呼び出し

setInterval()メソッドを一定の時間隔で処理を繰り返す処理を関数呼び出しで実行する場合は以下のようなコードになります。

第一引数に実行する関数、第二引数に繰り返す間隔をミリ秒で指定します。

setInterval(myFunction, 1000)

function myFunction() {
	// 処理
	console.log(1)
}

開始時間の遅延は第三引数に指定する事が可能です。

setInterval(myFunction, 1000, 500)

function myFunction() {
	// 処理
}

第四引数以降はカンマ区切りでsetInterval()メソッドで実行する関数にパラメータを付与できます。

setInterval(myFunction, 1000, 500, 'param1', 'param2')

function myFunction(param1, param2) {
	// 処理
}

setInterval()で一定の時間隔で処理を繰り返す 無名関数

setInterval()を無名関数で実行する場合は以下のように記述する事が可能です。

setInterval(function () {
	// 処理
}, 1000)

アロー関数の場合は以下のようになります。

setInterval(() => {
	// 処理
}, 1000)

setInterval()で処理を終了させる

setInterval()メソッドで実行している処理はclearInterval()メソッドを利用して例外的に処理を終了させる事が可能です。
clearInterval()メソッドをするには、setInterval()での実行イベントに名前を付けておく必要があります。

clearInterval()メソッドの引数にはsetInterval()メソッドで実行している処理の名前を指定します。

以下の例では、setInterval()メソッドで実行する処理に「setUp」という名前を付けています。
この処理中、変数「num」の値が5以上になった時にclearInterval()メソッドで処理を終了させています。

let num = 0
let setUp = setInterval(function () {
	console.log(num)
	num++
	if (num > 5) (
		// この繰り返し処理を終了する
		clearInterval(setUp)
	)
}, 1000)

clearInterval()メソッドを使ったsetInterval()の停止処理は処理の内部、外部からも実行する事が可能です。