JavaScriptのsetTimeout()でパラメータ付き関数を呼び出す

柔軟な記述を許容する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