JavaScriptのsetIntervalメソッドで、一定間隔で処理を繰り返すサンプルです。
目次
サンプル | 一定間隔で処理を繰り返すサンプル |
setIntervalメソッド | |
clearInterval メソッド |
一定間隔で処理を繰り返すサンプル
実行ボタンをクリックすると数字の3から1秒ごとにカウントダウンします。
0になるとで停止します。途中で停止ボタンをクリックするとカウントダウンを停止します。
実行ボタンは何度でも押せます。
setIntervalメソッドと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.textContent = count;
timer1 = setInterval(syori1,1000);
}
function syori1(){
span1.textContent = --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 (関数名,ミリ秒); |
- 指定したミリ秒の間隔で関数を繰り返します。1000ミリ秒は、1秒です。
- 関数への引数と戻り値はありません。
- setIntervalメソッドの戻り値は、タイマーを識別する数値を返します。
- Intervalは、間隔という意味です。
- 以下はMDNのsetIntervalメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval
clearInterval メソッド
clearInterval ( setIntervalの戻り値); |
- setIntervalメソッドで開始された繰り返し処理を停止します。
- 引数は、setIntervalメソッドの戻り値です。
- 以下はMDNのclearIntervalメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearInterval
関連の記事