タイマーを停止する
前回まででタイマーの設定方法について見てきましたが、 一度タイマーを稼動させるとずっと動き続けていました。 それで今回は、タイマーを停止する方法について考えていきたいと思います。
タイマー停止スクリプト
タイマーを停止させるには、タイマーに名前を付ける必要があります （これをタイマーIDと言います）。 具体的には、タイマー自体を変数に格納します。 変数名がタイマーIDということになります。
では、一定時間でランダムに数字を表示していくタイマーをON/OFFしてみたいと思います。 以下のスクリプトをHTMLのBODY内に記入してみてください。
<form name="TM"> <input type="text" value=""> <input type="button" value="ON" onclick="Tmstr()"> <input type="button" value="OFF" onclick="TmrOff(0)"><br> <input type="text" value=""> <input type="button" value="ON" onclick="TmrOn(3)"> <input type="button" value="OFF" onclick="TmrOff(3)"><br> </form> <script type="text/javascript"> <!-- //タイマーを格納する変数の宣言 var Timer1,Timer2; //setInterval()を使ったタイマーの起動関数 function Tmstr() { Timer1 = setInterval("TmrOn(0)",1000); } function TmrOn(num) { //引数を数字に変換 var n = parseInt(num); //０～９までの乱数を取得して変数に代入 var Rnd = Math.floor(Math.random()*10); //テキストボックスに連続して表示 var str = document.TM.elements[n].value; document.TM.elements[n].value = str+Rnd; //引数が3の時はsetTimeout()を使って繰り返す if (n==3) { Timer2 = setTimeout("TmrOn(3)",1000); } } function TmrOff(num) { //タイマーを停止する if (num==0) { clearInterval(Timer1); } else { clearTimeout(Timer2); } } // --> </script>
＜サンプル＞
上のボックスがsetInterval()を使ったタイマーのON/OFF、 下がsetTimeout()を使ったタイマーのON/OFFです。
タイマー停止スクリプトの解説
では上記スクリプトを詳しく見ていきましょう。 フォーム名は「TM」にしました。 そして「テキストボックス＋ON/OFF各ボタン」のセットを ２つ作っています。
上の列のONボタンでは、関数Tmstr()を呼び出していますが、 これはsetInterval()を使ってタイマーを起動する関数です。 下の列のONボタンは関数TmrOn()を呼び出しますが、 こちらはsetTimeout()を使ったタイマーを起動します。 引数はテキストボックスのelements[]の番号です。
OFFボタンはタイマー停止関数TmrOff()を呼び出します。 引数を設定しているのはどちらのタイマーを停止させるのか識別するためです。 別に数字は何でも構わないのですが、今回は0と3にしました。
続いてJavaScriptの部分を見ていきたいと思います。 最初に変数Timer1,Timer2を宣言しています。 グローバル変数にしているのは、 複数の関数でTimer1,Timer2を使うからです。 Timer1はsetInterval()タイマーを格納します。Timer2がsetTimeout()となります。
次に関数Tmstr()がありますが、 setInterval()を使って関数TmrOn()を1000ミリ秒単位で呼び出します。 関数TmrOn()の引数はテキストボックスのelements[]の番号です。 このタイマーを変数Timer1に格納します。
次は関数TmrOn()です。最初に引数をparseInt()で数字に変換します。 続いて0～9までの乱数を発生させて、変数Rndに代入しています。 変数strは現在表示されているテキストボックスの文字列です。 それに変数Rndを加えてテキストボックスに表示しています。
関数TmrOn()の最後で、if文を使って引数が3か確認します。 3の時はsetTimeout()を使って処理を繰り返すようにします。 この時、変数Timer2にタイマーを格納します。
最後はタイマー停止関数TmOff()です。 引数が0の時は、setInterval()のタイマーを停止します。 clearInterval()がタイマーを停止する命令文です。 括弧内はタイマーID（タイマーを格納した変数）を指定します。 引数が0以外の時はclearTimeout()を使ってsetTimeout()のタイマーを停止します。
- clearInterval(タイマーID)
- タイマーIDで指定されたsetIntervalタイマーを停止します。
- clearTimeout(タイマーID)
- タイマーIDで指定されたsetTimeoutタイマーを停止します。