編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

コールバック関数の引数の扱い

タイマーで呼ばれるコールバック関数が引数を受け取る場合、無名関数でラップする

function foo(a,b) { console.log(a + "," + b); }
 
setTimeout("foo(1,2)", 500);            
setTimeout(function(){ foo(1,2) }, 500);

前者のように"foo(1,2)"のような文字列を渡してeval()する事も出来るが、後者のように無名関数を使う方がベタープラクティス。

コールバック関数へ引数を渡す

function foo(n) { console.log("DEBUG: " + n); }
 
setTimeout("foo(100)", 0);
var num = 200;
setTimeout("foo(" + num + ")", 0); 

↑のように引数を含めて文字列で渡してevalする事も出来なくはないが、↓のように無名関数をでラップした方が良い。

コールバック関数へ引数を渡す方法

function foo(n) { console.log("DEBUG: " + n); }
var num = 100;
setTimeout(function () { foo(num) }, 0);

あるいは、

var num = 100;
setTimeout((function(n){
  return function(){ console.log(n); };
})(num), 0);

即時関数への引数で渡し、それをコールバック関数内で参照する。

引数の内容が確定するタイミング

↑の方法では、

function foo(n) { console.log("DEBUG: " + n); }
var num = 100;
setTimeout(function () { foo(num) }, 0);
num = 200;
DEBUG: 200

setTimeout()実行後にnumを100から200へ変えると、コールバック関数実行時に渡される引数は200を参照する。100を参照するようにするには↓のようにする。

function foo(n) { console.log("DEBUG: " + n); }
var num = 100;
setTimeout((function(n){
  return foo(n);
})(num), 0);
num = 200;
DEBUG: 100

詳しくやると↓。

var num = 100;
(function () {
  console.log("INSIDE1: " + num);
  setTimeout((function(n){
    return function(){
    console.log("CALLBACK: " + n);
    console.log("CALLBACK: " + this.num);
  };})(num), 0);
  num = 200;
  console.log("INSIDE2: " + num);
})()
console.log("OUTSIDE: " + num);
INSIDE1:  100
INSIDE2:  200
OUTSIDE:  200
CALLBACK: 100
CALLBACK: 200

コールバック関数に渡される引数nの値はsetTimeout()実行時に決まる。グローバルのnumは100から200へ変わった後の値を参照している。


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2012-01-28 (土) 14:27:40 (1912d)