けさらんぱさらん

方向性は定めず、ただ思いつくままに

JavaScriptで一定時間で処理を繰り返す方法

JavaScriptで一定時間で処理を繰り返す方法は
setIntervalかsetTimeoutを使うのですが
ググるとほとんど

setInterval("func()", 1000);

こんな感じで呼び出してほしい関数を文字列で渡しているサンプルにぶち当たります。

でもsetInterval関数もsetTimeout関数も関数そのものを渡すことができます。

setInterval(func, 1000);

かっこ付けないように注意。

文字列で渡しているとTypeScriptなどを使っているときに
折角のコンパイルエラーの恩恵に与れないので
是非、下の方法でやってほしいものです。


但し関数を渡す方法だとちょっと嵌ることがあります。
こんな感じのオブジェクトがあるとします。

var obj = {
    text: "obj",
    func: function () {
        console.info(this.text);
    },
}

このオブジェクトのfuncメソッドを文字列渡しで呼び出すと

setInterval("obj.func()", 1000);

これは問題なく動きます。

関数そのものを渡します

setInterval(obj.func, 1000);

これを実行するとコンソールにundefinedがいっぱい出力されます。

なんでそんなことになるかと言うとあの悪名高いJavaScriptのthisの問題です。

これをちゃんと動かすには

setInterval(function () { obj.func() }, 1000);

これで無事動きます。

ということでsetInterval関数には文字列でなく関数そのものを渡してください。