JavaScript でタイマーを使う(setInterval(),setTimeout())

JavaScript でタイマーを使う。JavaScriptでは、｢一定時間後｣に処理を行う setTimeout() と、｢一定時間ごと｣に処理を行う setInterval()の2つが用意されているが、今回は繰り返し処理を行いたいので、後者を使う。

setInterval()でやりたい処理と間隔を指定し、clearInterval()で繰り返しを中止する。

var timer;
window.onload = function(){
   timer = setInterval('hoge()',1000)); // 1000ミリ秒ごとに実行したい処理hoge()を登録
}
function stop(){
   clearInterval(timer); // 繰り返し処理を中止する
}
function hoge(){
   // 一定時間ごとにやりたい処理
}

setTimeout()を以下のように使うことで同様のことができる。この例では、kick()の中で自分自身を呼び出している。

window.onload = function(){
   kick(); // やりたい処理をキックする
}
function kick(){
   hoge(); // 繰り返しやりたい処理
   setTimeout('kick()',1000); // 1000ミリ秒後にkick()を実行
}

これにより、kick() を実行 → hoge() を実行・完了 → kick() を1秒後に実行予約 → … のサイクルが繰り返されるので、結果としてやりたい処理 hoge() が1秒ごとに実行される。

setTimeout()を使えば、hoge()が完了してから次の実行を登録するため、hoge()が重い処理の場合でも、きちんと間隔をおいて実行してくれる。
一方、setInterval()の場合は、1回目のhoge()の(完了ではなく)開始時点から一定時間後に2回目以降のhoge()が実行される。そのため、hoge()の処理時間にバラつきがあるようなケースでは、間隔が一定にならなかったり、hoge()が重い処理の場合、完了する前に次のhoge()が起動される可能性がある。

ただし、今回はhoge()自体が非同期的に動作しているので、どちらの方法でも同様の結果が得られる(はず)。(すなわち、hoge()の完了を待たずにsetTimeout()が実行されるため。)
hoge()の実装によっては、たとえば以下のような記述ができるかもしれない。

function kick(){
   hoge().success(function(){
      setTimeout('kick()',1000); 
   });
}

この点については今後の課題。