JavaScript インターバルタイマーを設定・解除する
一定時間ごとに処理を行うには「setInterval()」メソッドを使います。setInterval()メソッドの最初のパラメータに実行する処理（文字列で命令を囲むか、無名関数で処理を記述する）、２番目のパラメータには定期的に処理するミリ秒を指定します。ただし、２番目に指定したミリ秒ごとに必ずしも処理が実行される保証はありません。setInterval()でタイマーを設定すると、戻り値としてタイマーIDが返されます。タイマーを停止させる場合は「clearInterval()」メソッドを使い、パラメータにタイマーIDを指定します。このタイマーIDは、setInterval()メソッドの戻り値になります。なお、setInterval()メソッドもsetTimeout()メソッドと同様に、3番目以降のパラメータを指定することができます。この場合、setInterval()メソッドで呼び出される関数にパラメータとして渡されます。
<body>
<script>
window.addEventListener("load" , function(){
var ele = document.getElementsByTagName("output");
//タイマーIDを入れる変数を用意
var timerID = null;
//開始ボタンにイベントを割り当て
document.getElementById("startBtn").addEventListener("click", function(){
if(!timerID){
ele[1].innerHTML = "インターバルタイマーを起動させました";
//1秒ごとに時間を表示
timerID = setInterval("displayTime()", 100);
}else{
ele[1].innerHTML = "すでにインターバルタイマーは起動中です";
}
}, false);
//終了ボタンにイベントを割り当て
document.getElementById("stopBtn").addEventListener("click", function(){
if(!timerID){
ele[1].innerHTML = "インターバルタイマーは停止しています";
}else{
ele[1].innerHTML = "インターバルタイマーを停止させました";
clearInterval(timerID);
timerID = null;
}
},false)
}, false);
//定期的に呼び出される処理
function displayTime(){
var ele = document.getElementsByTagName("output");
ele[0].innerHTML = (new Date()).getTime();
}
</script>
<form>
<input type="button" value="インターバルタイマー開始" id="startBtn">
<input type="button" value="インターバルタイマー終了" id="stopBtn">
</form>
<output></output><br>
<output></output>
</body>インターバルタイマー開始ボタンをクリックすると、インターバルタイマーがスタートして現在のミリ秒が表示されます。
さらにインターバルタイマー開始ボタンをクリックすると、インターバルタイマーが動作中ですと表示されます。
インターバルタイマー終了ボタンをクリックすると、インターバルタイマーが停止します
