Core > setTimeout

setTimeoutの注意点。

by s_hiroshi

JavaScript

// 本スクリプトはChoose Frameworkを下記のとおり選択する
// no wrap(head)
// No-Library
var x = 'global';

// (1) かん単な例
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);
    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