JavaScript 一定間隔で処理を繰り返す(setInterval)

nas

JavaScriptのsetIntervalメソッドのサンプルです。

setIntervalメソッド

変数 = setInterval (任意の処理,任意の時間(ミリ秒))
  • 指定した任意の時間(ミリ秒)で任意の処理を繰り返します。
  • 戻り値は、タイマーを識別する数値を返します。
  • Windowオブジェクトのメソッドです。
  • 以下はMDNのsetIntervalメソッドのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval

clearInterval メソッド

clearInterval ( setIntervalの戻り値)

サンプル

setIntervalメソッドとclearIntervalメソッドのサンプルです。
実行ボタンをクリックすると１秒毎に数字が1からカウントアップして表示され、3になると停止します。
または、秒数が3になるまでに、停止ボタンをクリックするとカウントアップが停止します。

状態：

秒数：

コード

上記サンプルのコードです。
25行目は、setIntervalメソッドで1秒(1000ミリ秒)ごとに28行目のsyori1を実行します。
37行目は、clearIntervalメソッドは、25行目のsetIntervalメソッドの戻り値を引数にしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>setIntervalメソッド</title>
</head>
<body >
<p>状態：<span id="sp1"></span></p>
<p>秒数：<span id="sp2"></span></p>
<input type="button" value="実行" id="b1" onclick='btn1_click()'>
<input type="button" value="停止" id="b2" onclick='btn2_click()'>
<script>
var timer1;
var count;
var sp1 = document.getElementById("sp1");
var sp2 = document.getElementById("sp2");
var b1 = document.getElementById("b1");

function btn1_click(){
	count = 0;
	b1.disabled = true;
	sp1.innerHTML = "カウント中です"
	sp2.innerHTML = count
	//1秒間隔でsyori1を実行する
	timer1 = setInterval(syori1,1000);
}

function syori1(){
	sp2.innerHTML = ++count; // 1を加算して表示
	if(count>2){
		btn2_click();
	}
}

function btn2_click(){
	// タイマーを停止する
	clearInterval(timer1);
	sp1.innerHTML = "停止しました"
	b1.disabled = false;
}
</script>
</body>
</html>

関連の記事

JavaScript 指定した時間の経過後1度処理を実行する(setTimeout)



△上に戻る