一定の時間間隔で何かの関数を繰り返し実行したいというケースでは JavaScriptのタイマー関数が利用されます。

JavaScriptのタイマー機能について

例えば「id=setTimeout("実行文",時間)」で指定時間後に特定の動作をさせられます。 「clearTimeout(id)」で設定したタイマーをクリアします。

無限回実行では「id=setInterval("実行文",時間)」が使え 「clearInterval(id)」で停止します。

setTimeout(),clearTimeout()の問題点

先のタイマー関数には使いにくい面があります。 上記関数に渡す引き数は "実行文"の文字列か関数オブジェクトになるため 「eval("実行文")」の場合と同じくそれらの中で参照する変数は 大域的に定義されている必要があります。

function f(s,msec){ setTimeout("alert(s)",msec); } f("Hello World!",1000);

これは変数「s」がローカルであるためエラーになります。

このコードを通すには 「s」をグローバルにする必要があります。

function f(s,msec){ self["s_global"]=s; setTimeout("alert(s_global)",msec); } f("Hello!",1000); f("GoodBye!",3000);

しかしこの方法はすぐに危険だと分かります。関数f()を異なる場所で複数回 呼び出す場合、大域変数「s_global」を上書きしてしまう可能性があるからです。 上の例のように「f("Hello!");」を実行後、直ぐに「f("GoodBye!");」を実行したら 「Hello!」が表示されるはずの１秒後に「GoodBye!」が表示されます。

呼び出す関数の引き数が沢山ある場合、任意回数の呼び出しがある場合に ちょっと面倒になります。

そこで タイマー機能を簡単に実行できる関数を考案しました。 以下の特徴があります。

kl_timer_new/start/stop()の特徴

kl_timer_...()の利用例

この関数を利用すると 先の例は以下のようになります。

function f(s,msec){ kl_timer_start(g,new Array(s),msec,1); } function g(s){ alert(s); } f("Hello!",1000); f("GoodBye!",3000);

この場合は ２つの実行文がきちんと別々に実行されることが分かります。

定番の現在時刻の表示。ステータスバーに現在の時刻を表示します。

このように setInterval()のようにも書けます。

次の例では実行カウントを１秒ごとに３回表示します。 「0」「1」「2」が順に表示されます。

自分でカウンタを作らなくても登録関数内から「this...」で 現在のタイマー状態にアクセスできます。

レイヤーの制御に使ってみましょう。

self["lay1"]=kl_tlayer_new("Hello World!","white","blue",70); kl_tlayer_show(lay1); kl_timer_start(kl_tlayer_moveby,new Array(lay1,1,1),50,100);

この例では半透明のレイヤーが右下方向に(1px,1px)ずつ移動していきます。

次は文字列を順番に表示させて見ます。

var texts="吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。。。。。"; function neko(e){ //全文表示したら終わり (false値が返されるとタイマー停止) if(this.kl_cnt>=texts.length) return false; //実行中にとっておきたいObjectはthis属性にしてしまいます this.neko=(this.neko ? this.neko : "")+texts.charAt(this.kl_cnt)+" "; //レイヤーに書き出します kl_tlayer_write(e,this.neko,"ns4 runs this ok!","white"); return true; } function soseki(bgcolor){ //前景を白、背景を指定色、不透明度70%、ドラッグ有効化、、、 var e=kl_tlayer_new("","white",bgcolor,70,new Array("width",520,"height",300,"padding",new Array(20,30),"drag",true,"raise",true,"fg",new Array("line-height",2.0,"filter","shadow(strength=3,color=#333333)"))); kl_tlayer_show(e); //タイマー実行 (このようにローカル変数「e」を渡せます) kl_timer_start(neko,new Array(e),200); } soseki("blue"); //soseki("red");

上の例では タイマー情報を記憶している オブジェクト「this」にアクセスしています。 文字列を格納するのに大域的な変数を用いず 「this.neko」においています。

こうすると別のタイミングで「soseki("red")」が呼ばれても 変数が混じらないためそれぞれが独立してきちんと動作します。

複数のタイマーを使うケースでは状態変数の置き場所に困るケースが多いのですが 「this」に置けるので重宝します。

半透明レイヤー：kl_tlayer_new() 動的にレイヤーの中身を書き替え＆URLロード：kl_layer_write/load()