【JavaScript入門】指定した時間毎に処理を実行するsetIntervalメソッドの使い方
一定時間毎に処理を繰り返したい場合はsetIntervalメソッドを使用します。
setIntervalの使い方setInterval(実行したい処理,何秒毎に実行するかをミリ秒で指定)setInterval(func,3000)
See the Pen
setInterval by shiakisudev (@shiakisu)
on CodePen.
以下はサンプルコードです。
HTML
<button id="start">スタート</button>
<button id="cansel">キャンセル</button>
<div id="result"></div>
js
document.addEventListener('DOMContentLoaded',function(){
//タイマーID
let timerID;
//「スタート」ボタン押下時に呼び出される関数。
function start(){
function print(){
document.getElementById('result').innerHTML += '3秒経過しました。<br>';
}
//3秒毎にprint()を実行。
timerID = setInterval(print,3000);
}
//「キャンセル」ボタン押下時に呼び出される関数。
function cansel(){
//タイマーを終了する。
window.clearInterval(timerID);
//キャンセルした旨を画面に表示する。
document.getElementById('result').innerHTML += "キャンセルされました。<br>";
}
//イベントリスナー登録（スタート）
document.getElementById('start').addEventListener('click',start,false);
//イベントリスナー登録（キャンセル）
document.getElementById('cansel').addEventListener('click',cansel,false);
},false);
setIntervalの実行順序setIntervalを使う上で1つ気をつけておきたいのがsetIntervalで指定した処理は3秒毎に実行してくれますが、後続の処理はそれとは関係なく実行されるということです。
以下のサンプルでは、「スタート」ボタンを押下すると①「ここはsetIntervalよりも前の行です。」②「ここはsetIntervalよりも後ろの行です。」③「3秒経過しました。」の順で画面に表示されることが確認できます。
See the Pen
setInterval2 by shiakisudev (@shiakisu)
on CodePen.
HTML
<button id="start">スタート</button>
<button id="cansel">キャンセル</button>
<div id="result"></div>
js
document.addEventListener('DOMContentLoaded',function(){
//タイマーID
let timerID;
//「スタート」ボタン押下時に呼び出される関数。
function start(){
document.getElementById('result').innerHTML += 'ここはsetIntervalよりも前の行です。<br>';
function print(){
document.getElementById('result').innerHTML += '3秒経過しました。<br>';
}
//3秒毎にprint()を実行。
timerID = setInterval(print,3000);
document.getElementById('result').innerHTML += 'ここはsetIntervalよりも後ろの行です。<br>';
}
//「キャンセル」ボタン押下時に呼び出される関数。
function cansel(){
//タイマーを終了する。
window.clearInterval(timerID);
//キャンセルした旨を画面に表示する。
document.getElementById('result').innerHTML += "キャンセルされました。<br>";
}
//イベントリスナー登録（スタート）
document.getElementById('start').addEventListener('click',start,false);
//イベントリスナー登録（キャンセル）
document.getElementById('cansel').addEventListener('click',cansel,false);
},false);
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！