setInterval のこと

まず、JavaScript の setInterval を使ったタイマーの説明をします。
setInterval は、一定の遅延間隔を置いて指定した関数を繰り返し呼び出します。構文は、
① intervalID = window.setInterval(func, delay[, param1, param2, ...])
又は
② intervalID = window.setInterval(code, delay)
です。intervalID は clearInterval に渡すことのできる固有のインターバル ID です。func は繰り返し呼びたい関数です。 もう一つの構文の code は、繰り返し呼び出したいソースコードの文字列です。 delay は、setInterval() が funcを呼び出す前に待つべきミリ秒数(1/1000 秒) です。 最初の構文①で関数にパラメータを付加したものは、IE では動作しません。window. は省略できます。 たとえば、var intervalID = window.setInterval('flashtext()', 1000 ); では、ntervalID をクリアするまで flashtext() 関数が 1 秒に 1 回呼び出されつづけます。

タイマーをクラス化する

タイマーをクラス化すれば、2つ以上のタイマーを同時に動かせるようになります。タイマーから呼び出す関数をクラス化し intervalID もクラスのプロパティとして定義すれば簡単に目的を達成できそうです。そこで、クラス化したタイマーを TM というオブジェクトで使用する場合を考えて見ましょう。簡単にできると思っていましたが、①の構文は全てエラーになります。
 TM.intervalID = setInterval( 'TM.func()',1000 )
 TM.intervalID = setInterval( TM. + 'func()',1000 )
そこで、②の構文を使います。
 TM.timerId =setInterval(function(){TM.func();}, 1000);
このように、ソースコードとしてクラス内のプロパティ関数 TM.func() を無名関数で呼び出せばよいのです。
サンプル: クラス化したタイマーのサンプル

クラス化したタイマーのサンプルソースコード

function timer{・・・・} は、クラス化する予定のタイマー関数です。タイマーに関する次の変数は、すべて関数のプロパティとして this をつけて定義しておきます。
クラスのプロパティの関数 this.timeoutCheck = function(){・・・・}
インターバルID this.timerId
タイマー関連の変数 this.timeout_sec , this.var_timer
これで、クラスの準備は完了です。
最初の「ここをクリック」をクリックすると function exec_timer(){・・・・} が実行され、new timer() で、timer() をクラスとして利用します。ここでは、タイマーのクラスオブジェクトとして、tm とtm2 をせい生成し、2つのタイマーを同時に動かしています。
おまけです。function timer2(){・・・・} では、クラスの中からクラスの中にあるタイマー関数を呼ぶ方法です。function timer{・・・・} と異なるところだけ説明します。
次の「ここをクリック」をクリックすると function exec_timer2(){・・・・} が実行され、new timer2() で、timer2() をクラスとして使用します。クラスの中から this.timeoutCheck2() を呼ぶ場合、
 this.timerId =setInterval(function(){this.timeoutCheck2();}, 1000);
では、エラーになります。this.timeoutCheck2() が無名関数として呼ばれているため、この中の this は、window 自身のオブジェクトを示してしまうからです。そこで、面倒でも無名関数から呼ぶためのオブジェクトをダミーで定義します。
 var self= this;
 this.timerId =setInterval(function(){self.timeoutCheck2();}, 1000);
これで、クラス内の this.timeoutCheck2() 関数を呼び出すことができます。サンプルでは、tm2 と tm3 のオブジェクトをつくり、2つのタイマーを同時に動かしてみました。tm3 では、タイマーインターバルをセットした後、tm3.timeout_sec と tm3.var_timer を変更してみました。タイマーを動かした後での変更ですので、ちょっと気持ち悪いですが tm3 のオブジェクトを作ったときに、タイマー動作は始まっていますので仕方がありません。

js_timer.js のソースコード

//JavaScript のタイマークラス化

function timer() {
    this.timeout_sec=2;//デフォルトタイムアウト(秒)
    this.var_timer="タイマー1";//デフォルトタイマー名称
    // タイムアウト処理.
    this.timeoutCheck=function() {
        this.timeout_sec --;
        if(this.timeout_sec <= 0) {
            // タイマーをストップする
            clearInterval(this.timerId);
            //alert( this.var_timer+'が、タイムアウトです。' );
            document.getElementById('span1').innerHTML=this.var_timer+'が、タイムアウトです。';
            return false;
        }
    }
}

function exec_timer(){
    //タイマーのクラスオブジェクトを作る
    var tm=new timer();
    tm.timeout_sec=3;
    tm.timerId =setInterval(function(){tm.timeoutCheck();}, 1000);
    
    var tm2=new timer();//2つ目のタイマーを動かしてみる
    tm2.timeout_sec=1;
    tm2.var_timer="タイマー2";
    tm2.timerId =setInterval(function(){tm2.timeoutCheck();}, 1000);
}


function timer2() {
    this.timeout_sec=2;//デフォルトタイムアウト(秒)
    this.var_timer="タイマー(クラス内コール)";//デフォルトタイマー名称
    //クラスの中から呼ぶ場合
    var self= this;
    this.timerId =setInterval(function(){self.timeoutCheck2();}, 1000);
    //タイムアウト処理
    this.timeoutCheck2=function() {
        this.timeout_sec --;
        if(this.timeout_sec <= 0) {
            // タイマーをストップする
            clearInterval(this.timerId);
            document.getElementById('span2').innerHTML=this.var_timer+'が、タイムアウトです。';
            return false;
        }
    }
}

function exec_timer2(){
    var tm2=new timer2();
    var tm3=new timer2();
    tm3.timeout_sec=1;//タイムアウト時間変更
    tm3.var_timer="タイマー(クラス内コール2)";
}

上記ジャバスクリプトを実行する HTML ファイルです。

js_timer.html のソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta http-equiv="content-style-type" content="text/css">
<script type="text/javascript" src="js_timer.js"></script>
<title>JavaScript のタイマーをクラス化</title>
</head>
<body>
setInterval で呼び出す関数をクラス化しました。<br>
<br>
タイマー表示(クラス化したタイマーを2つ同時に動かします)<br>
 ”<span id='span1'></span>”<br>
<a href="#" onclick="exec_timer()">ここをクリック</a><br><br>

クラス内から呼んだタイマー表示<br>
 ”<span id='span2'></span>”<br>
<a href="#" onclick="exec_timer2()">ここをクリック</a><br><br>
</body>
</html>

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

スポンサード リンク

このページは 

トップページ > JavaScript > クラスタイマー