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

nas

JavaScriptの一定間隔で処理を繰り返すサンプルです。
setIntervalメソッドを使用します。

確認環境
・Windows10
・Google Chrome

目次

一定間隔で処理を繰り返すサンプル

実行ボタンをクリックするとsetIntervalメソッドで数字の3から1秒ごとにカウントダウンします。0になるとclearIntervalメソッドで停止します。
秒数が0になるまでに、停止ボタンをクリックするとclearIntervalメソッドでカウントダウンを停止します。実行ボタンは何度でも押せます。

秒数：

コード

上記サンプルのコードです。

<p>秒数：<span id="span1"></span></p>
<input type="button" value="実行" id="b1" onclick="clickBtn1()">
<input type="button" value="停止" id="b2" onclick="clickBtn2()">

<script>
let timer1;
let count;
const span1 = document.getElementById("span1");
const button1 = document.getElementById("b1");

function clickBtn1(){
	button1.disabled = true;
	count = 3;
	span1.innerHTML = count;
	timer1 = setInterval(syori1,1000);
}
function syori1(){
	span1.innerHTML = --count; //1を減算して代入
	if(count<1){
		clickBtn2();
	}
}
function clickBtn2(){
	clearInterval(timer1);
	button1.disabled = false;
}
</script>

2行目のボタンをクリックすると11行目の関数を実行します。
15行目は、setIntervalメソッドで1秒(1000ミリ秒)ごとに17行目の関数syori1を実行します。
19,20行目は、変数のcountの値が1より小さくなったら23行目の関数を呼びます。
24行目のclearIntervalメソッドは一定間隔で実行する処理を停止します。引数は、15行目のsetIntervalメソッドの戻り値です。

 

setIntervalメソッド

変数 = setInterval (関数名,ミリ秒);
　
function 関数名(){
 　繰り返したい処理
}
  • 指定したミリ秒の間隔で関数を繰り返します。1000ミリ秒は、1秒です。
  • 関数への引数と戻り値はありません。
  • setIntervalメソッドの戻り値は、タイマーを識別する数値を返します。
  • 以下はMDNのsetIntervalメソッドのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval

clearInterval メソッド

clearInterval ( setIntervalの戻り値);

関連の記事

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

△上に戻る