setInterval()の盲点::JavaScript

タイマー処理ならsetInterval()

Javascriptで、指定した時間ごとに処理を行いたいとsetInterval()を使用するのですが、思ったように動かない!!がーん!!ってなることがあるんですよ。
なぜか?
それは、使い方を間違えるんです。。。

ハイ、わかります。
ぼくがおバカちゃんで、何度も同じ間違いをする記憶力のない人間だからです。
というわけで、なぜミスるのか書いて記録しておきます。
次に動かなかったらここ読めよって。笑

さて、setInterval()は通常以下のように記述しますね。

var HogeTimer = setInterval("hogemoge()",1000);
function hogemoge(){
	alert("ほげもげタイマー起動!");
}

これを実行すると、「ほげもげタイマー起動!」というアラートが1秒ごと(※setIntervalの時間設定はmsなので1000msが1秒)に表示されます。

setInterval()の盲点、引数

ここまでが通常の使用方法なのですが、僕はよく下記のような間違いをしてしまいます。

var HogeTimer = setInterval(hogemoge(),1000);
function hogemoge(){
	alert("ほげもげタイマー起動!");
}

これを実行すると、一度だけアラートが表示されてヨシッって思うのですが、二度目がこない…。
なぜって、setInterval()の引数です。
関数名の場合はダブルクォートでくくらないといけないんですよ!!
なんでこんな仕様なんだーーーー!って発狂しそうなくらい時間を無駄にしています。(今までの累計ムダ時間)

というわけで、気をつけよう!
setInterval()の引数が関数名の場合はダブルクォートでくくる。

//ちなみにこれは普通に動く
var HogeTimer = setInterval(function(){alert("ほげもげタイマー起動!");},1000);

JavaScriptは奥が深いな。。。。笑

参考サイトなどなど

参考:
JavaScriptのsetInterval()に引数ありの関数を渡す場合
一定時間で繰り返す(setInterval)

あまり関係ないけど、面白かった記事
setIntervalとsetTimeoutを調べた結果余分なことになった

    • 匿名
    • 2014 07/21 11:18am

    var HogeTimer = setInterval(hogemoge,1000);
    function hogemoge(){
    alert(“ほげもげタイマー起動!”);
    }

  1. トラックバック 0

return top