開発日記 020

Demo
今回は、前々回のたくさん作ったセットインターバルを一個にまとめるプログラムの実験機一号です。
まずはDemoを見てください。
4つのdiv要素が表示され一秒ごとに一番上は1ずつ、2番目は10ずつ数字が増えていきます。
ではでは、ソースです。
window.onload = function(){

(function(){
var targarr = new Array,
targlength = 0,
targnum = 0,
main = function( ){
for( i=0; i<targlength; i++){
targarr[i]();
};
};
intervalid = window.setInterval( main, 1000 );
window.setInterval = function( func, time ){
targarr[ targnum ] = func;
targnum ++;
targlength ++;
};
})();


var box = [],
id1 = document.getElementById('div1').childNodes.item(0),
id2 = document.getElementById('div2').childNodes.item(0),
id1num = 0,
id2num = 0;
box[0] = div1;
box[1] = div2;
function div1(){
id1.nodeValue = id1num;
id1num ++;
};
function div2(){
id2.nodeValue = id2num;
id2num += 10;
};
timer1 = setInterval(div1,100);
timer2 = setInterval(div2,100);
function div(){
for(var i=0; i box[i]();
};
};
};


動作としては、div1とdiv2の中に足していった数字を表示しているのですが、赤字より下の部分の青文字部分ではsetIntervalを2つ呼び出し、それぞれ40ミリ秒ごとに呼び出しを行っている事が分かると思います。
しかし、実際の動作では、1000ミリ秒ごとに呼び出されています。
理由は簡単。赤字の部分ですね ・。・!
まず、一つのsetIntervalが起動します。この赤字部分で呼び出されたsetIntervalが以後呼び出されるインターバルの代わりに全ての関数を呼び出してくれます。まとめ役ですね ・。・ノ
赤字の部分以降に呼び出されたsetIntervalは通常の動作を行わずにtargarrという名前の配列に呼び出す予定だった関数のみを格納してその役目を終えます -人-
一つ戻ってまとめ役のインターバルの動作を見てみます。まとめ役は関数meinを呼び出しています。そこではfor文を使って一個ずつtargarrに格納された関数を実行しています。
これを使えば、インターバルの呼び出し個数が減るので場合によっては軽くなるかも知れません ・。・ノ
しかし、リムーブはどうすればいいのダ・・・ -。-?
Category: プログラム

コメント

コメントの投稿

トラックバック