タイマーを停止するJavaScript入門

タイマー停止スクリプト

タイマーを停止させるには、タイマーに名前を付ける必要があります （これをタイマー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>

//タイマーを格納する変数の宣言
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タイマーを停止します。