setTimeoutのコールバック関数 : JavaScript

Tweet

Pocket

setTimeoutのコールバック関数に引数を渡すときの注意点のメモ。

» jsFiddle

(1) かん単な例

var x = 'global';

function callback1() {
    console.log('x: ' + x); 
};

(function () {
    setTimeout(callback1, 500); // 正常 xはglobal
    setTimeout("callback1()", 1000); // 正常 xはglobal
}());

(2) コールバック関数として参照を渡す場合と文字列を渡す場合の違い

(function () {
    var x = 'local';
    function callback2() {
        console.log('x: ' + x);
    }
    setTimeout(callback2, 1500); // 正常 xはlocal
    // setTimeout("callback2()", 1500); // エラー発生 callback2 is not defined
}());

(3) コールバック関数内のthisはwindowオブジェクトを参照

var o = {
    x: 'property',
    callback3: function () {
       console.log('x: ' + this.x); // thisはwindowオブジェクト
    },
    run: function () {
        setTimeout(this.callback3, 2000); // xはglobal
    }
};
o.run(); // xはglobal

(4) コールバック関数の引数

• 4-1. setTimeout(callback, 1000, arg1, arg2)
  対応していないブラウザがある。
• 4-2. setTimeout(‘callback(“‘ + arg1 + ‘”, “‘ + arg2 + ‘”)’;
  • 4-2-1 引数はクォートで囲む
  • 4-2-2 引数がオブジェクトのときは動かない?
    オブジェクトを引数にするとエラーが発生。// missing ] after element list
  • 4-2-3 (2)のように参照で渡すときと違いがある

引数を渡すときは下記の記事で紹介されている方法を使うと良い。
http://wiz-code.digick.jp/blog/?p=711

function curryTimerCallback() {
    var userFunc = arguments[0],
        args = Array.prototype.slice.call(arguments, 1);
    // var a = ['a', 'b', 'c'];
    // console.log(a.slice(1));
    // ['b', 'c']
    return function() {
        return userFunc.apply(this, args);
    };
}
var o2 = {
    x: 'property',
    callback4: function (arg) {
       console.log('x: ' + arg.x);
    },
    run2: function () {
        setTimeout(curryTimerCallback(this.callback4, this), 2500);
    }
};
o2.run2(); // xはproperty