■JavaScriptのタイマー機能とクロック機能■

■JavaScriptの時間関係の機能■

JavaScriptには,時間関係の機能としてタイマー機能とクロック機能を持っ ている.タイマー機能は,ある時間間隔を計測して一定時間がたったときに何か 操作を行うための機能である.それに対してクロック機能は,まさしく現在時刻 を取得するための機能である.

■タイマー機能■

ワンショットタイマー(一度限りで繰り返し無しのタイマー)

タイマー機能を利用するために,JavaScriptは次のメソッドを用意している.指定した時間間隔を空けて,自動的に動作する関数を指定するメソッドである.

  setTimeout( "何か関数(メソッド)の呼び出しをするための記述", 500);

例えば,update()という名前の関数(メソッド)を用意してあった場合は,次 のように記述する.

  setTimeout("auto_update()",500);  //500m秒後にupdate()を起動

これを実行すると500m秒後に自動的に指定したJavaScriptの関数,この場合はupdate()を呼び出すことができる.このように,指定した時間後一回だけ何か機能を呼び出すタイプのタイマーのことを,特にワンショットタイマーと呼ぶ.

これに対して,一度時間間隔を設定すると,その時間間隔の度に繰り返し何か機能を実行するようなタイプのものをインターバルタイマーと呼ぶ.

ワンショットタイマーを使ったインターバルタイマーの作成

ワンショットタイマーを利用して,インターバルタイマーと同等の機能を作ることもできる.例えば,先のワンショットタイマー機能のSetTimeoutメソッドを次のようなある関数の中に書いておくとする.このとき,setTimeoutで一定時間後に呼び出す関数として自分自身を指定すると,500m秒間隔で自動的に実行し続けるプログラムとなる.

  function auto_update(){
    
    ....
    なにか表示するなど,自動的に更新させたい処理
    ....
    
    setTimeout("auto_update()", 500);  //500m秒後に自分自身(auto_update())を再実行
  }

ただし,これだけでは無限にこの繰り返しが行われることになる.JavaScriptの場合,このプログラムを停止するにはブラウザを閉じるしか方法は ない(それでも構わない場合も多いが).

そこで,次のように終了条件を判定するためのif文を用意することが多い.

  function auto_update(){
    
    ......
    なにか表示するなど,自動的に更新させたい処理
    ......
    
    if(終了条件を満たさないならば){
      setTimeout("auto_update()", 500); 
    }
  }

これならば,何か終了条件を満たした場合には,setTimeoutを呼び出さないので,そのまま終了する.

また,別解としてはタイマーを強制終了する方法もある.その場合には,setTimeoutを呼び出したときに,タイマーIDを取得しておく必要がある.タイマーIDというのは,setTimeoutが一つのプログラムで何回も呼ばれる可能性があるため,どのタイマーを停止するのか区別するための識別子(ID)を意味する.

例えば,500m秒後に表示画像を更新するために呼び出されたsetTimeoutと,10分後に警告文を表示するために呼び出されたsetTimeoutがあったとする.その二つのsetTimeoutのうちどちらか一方だけを強制終了したいとした時,その二つを区別するための何かが必要である.それがタイマーIDである.

タイマーIDは次のように,setTimeoutを呼び出したときに返値として返される.この例ではtidという名前の変数に結果のタイマーIDが代入される.

  var tid = setTimeout(指定関数指定時間);

返値というのは,数学における関数,例えばsin(角度)やcos(角度)などのように渡された引数(角度)に応じて計算された結果のことである.setTimeoutが何か数学的な計算をするわけではないが,このような数学の関数が持つ返値を返す機能を,タイマーIDを返すことに利用したものである.

このタイマーIDを使って,次のようにタイマーを強制終了させることができる.

  clearTimeout(終了させたいタイマーID);

例えば,先ほどの例で変数tidにタイマーIDを格納しておいた場合には,次のようにそのタイマーを強制終了できる.

  clearTimeout(tid);

ワンショットタイマーの起動

タイマー機能を使うためには,例えば次のようにボタンがクリックされた時にタイマーを起動させるなど,起動のきっかけが必要になる.

   <form>
     <input type=button value="起動" onClick="setTimeout(関数時間)">
   </form>

あるいは,内部でsetTimeout()を使用しているような関数を呼び出せばよい.

   <form>
     <input type=button value="起動" onClick="auto_update()"> </form>

また,ページが読み込まれた瞬間に自動的にタイマーを開始するためには,次のようにbodyタグ中でonLoadすればよい.

  <body onLoad="auto_update()">

インターバルタイマー

実は,JavaScriptにはワンショットタイマーを使ってインターバルタイマーを作らなくとも,最初からインターバルタイマーのためのメソッドも用意されている.その使い方は次のようなものである.

  var tid = setInterval(指定したい関数指定時間);

使い方はほぼsetTimeoutと同じであるが,繰り返し指定した関数が呼び出される点だけが違う.また,setIntervalを呼び出すと,次のように強制終了しない限り無限に繰り返しを続ける点に注意.

  clearInterval(終了させたいタイマーID);

先ほどのようにtidにタイマーIDが格納されているのならば,具体的には次のように書けばよい.

  clearInterval(tid);

インターバルタイマの起動

例えばボタンがクリックされた時にインターバルタイマーを起動するには,次のようになる.

   <form>
     <input type=submit value="起動" onClick="setInterval(関数時間)">
   </form>

実際に書くときの注意点として,onClickやonLoadなどでsetIntervalを指定する場合,関数の部分を記述するためにダブルコーテーションを使用することはできない.それは,ダブルコーテーションで括られた中にまたダブルコーテーションを入れ子にして使用することができないためである.ダブルコーテーションの対応が取れなくなってしまうため,内側の方はシングルコーテーションに変更しておくこと.

例えば次のようになる.

   <form>
     <input type=submit value="起動"
     onClick="setInterval('setImage(now + 1)',500)">
   </form>

■時計機能■

現在時刻を得るための時計機能として,次のメソッドが用意されている.

 var now = new Date();

Date()メソッドは,引数なしで(空の括弧のまま)呼び出すと,現在時刻を返すメソッドである.この返値は日付の内容を保持するオブジェクトである.いわゆる数値や文字ではない.上の例では,それがnowという名前の変数に格納されている.このnow変数を使って次のように具体的な時刻を得ることができる.

  var 日付 = now.getDate();    //0から31のどれか
  var 曜日 = now.getDay();     //0から6,0が日曜日を示し,6が土曜日
  var 時間 = now.getHours();   //0から23
  var 分   = now.getMinutes(); //0から59
  var 月   = now.getMonth();   //0から11,0が1月,11が12月を示す.
  var 秒   = now.getSeconds(); //0から59
  var 年   = now.getFullYear();//4桁の西暦年
  var 文字 = now.toLocaleString();  //現地時刻を表す文字列 

実はそのほかにも,国際標準時を取得したり,逆にこのオブジェクトに時刻をセットするためのメソッドも用意されている(あくまでプログラム中のオブジェクトにセットするのであって,パソコンの内蔵時計の時刻を変更するわけではない).現在時刻でなく特定の日時を表すオブジェクトも作成できる.ここでは省略する.

現在の日付をテキストボックスに表示するサンプルを示す.

<html>
<head>
  <title> 今日は何日 </title>
  <script type="text/javascript">
    function today(){
      var now = new Date();
      var y   = now.getFullYear();
      var m   = now.getMonth()+1;            //月を得るには+1が必要
      var d   = now.getDate();
      var DayOfWeek = new Array("日","月","火","水","木","金","土");
      var w   = DayOfWeek[ now.getDay() ];   //getDayの番号に対応する曜日

      var string_now;
      string_now = y + "-" + m + "-" + d + "(" + w + ")";

      document.xyz.abc.value = string_now;   //テキストボックスを書換
    }
  </script>
<body onLoad="today();">
  <form name="xyz">
    <input type="text" value="初期値" size=20 name = "abc">
  </form>
</body>
</html>