柔軟な記述を許容するJavaScriptならではの方法。
JavaScriptで一定時間ごとに(一定回数)処理を実行したいときは、
- setInterval()を使う
setInterval()で処理関数名と実行間隔を指定する。一定回数実行したらclearInterval()でタイマーを止める。 - setTimeout()を使う
setTimeout()で処理関数名と待機時間を指定する。これを一定回数実行する。
ことで実現できる。後者を使う場合、以下の記述パターンを紹介した。
// JavaScript function kick(){ hoge(); // 繰り返しやりたい処理 setTimeout('kick()',5000); // 5000ミリ秒後にkick()を再実行 }
実行回数が予め決まっている場合は次の記述法も取り得る。(ただし、実行内容は多少異なる可能性がある。)
// JavaScript function kick(){ for (var i = 0; i < 3; i++){ setTimeout('hoge()',5000 * i); // hoge()の実行タイミングを指定 } }
この例では、hoge()は(ほぼ)即時、5秒後・10秒後の3回実行される。
関数hoge()をパラメータ付きで呼び出したいときは、setTimeout(‘hoge(1)’,5000 ); のように記述することで実現できる。このhoge(1) の部分は文字列なので、変数を使って組み立てることもできる。例えば、外部の配列を一定間隔で処理したい場合は、以下のように書ける。
// JavaScript var gArray = ['a', 'b', 'c']; // 処理対象 // 一定間隔で実行したい関数 function hoge1(idx){ // 呼び出されるたびに異なる処理対象にアクセスする console.debug('called:' + gArray[idx]); } function test1(){ for (var i = 0; i < gArray.length; i++) { var func = 'hoge1(' + i + ')'; console.debug(func); setTimeout(func, 5000 * i); } }
これを実行すると以下の出力が得られる。
hoge1(0) hoge1(1) hoge1(2) called:a called:b called:c
ただし、次のような記述は別の関数のローカル変数にアクセスするためエラーが発生する。
// JavaScript function hoge2(data){ console.debug('called:' + data); } function test2(){ var lArray = ['a', 'b', 'c']; for (var i = 0; i < lArray.length; i++) { var func = 'hoge2(lArray[' + i + '])'; console.debug(func) setTimeout(func, 5000 * i); } }
実行結果
hoge2(lArray[0]) hoge2(lArray[1]) hoge2(lArray[2]) Uncaught ReferenceError: lArray is not defined