#初めに
Guildを作る息抜きにタイマーを作成していたのですが、案外引っかかるところが多かったので、それを記事にしようと思いました。
#即時関数にする理由
setIntervalは即時関数を使えばちょっとした問題があるみたいです。
このサイトから引用させていただきます。
setInterval() は指定ミリ秒に呼び出されたコールバックをコールバック関数に引き渡しますが、もしそれが引数のように他のものを期待している場合、それを混同する可能性があります。この問題を回避するためには、コールバックを呼び出すために無名関数を使用してください。
とのことです。
例えばが以下のプログラムですね。
var count = 0;
setInterval(function(){
console.log(count)
count++;
},1000)
0
1
2
3
4
5
こういう風にずっと続いていきます。
#詰まったところ
setIntervalしてみると、どうやってsetIntervalを止めるのか分からなかったのです。上の例では、setIntervalは外からclearIntervalで止めることが出来ますが、countが10に達した時点でsetIntervalを止めたい場合、中からif文で条件分離するのが一番ラクでしょう。
setIntervalを中の関数から止めるにはどうしたらいいのでしょう?
#clearIntearvalで解決
var count = 0;
var timerID = setInterval(function(){
if(count == 10)clearInterval(timerID);
console.log(count)
count++;
},1000)
0
1
2
3
4
5
6
7
8
9
10
案外こうやってもtimerIDのスコープが届くんですね。
#終わりに
まさかtimerIDをあそこで代入してもスコープがしっかり働くとは思いませんでした。javascriptは参考書を読んだわけではなく、適当にサンプルコードを見て学んだので理解してないところは多いのですが、参考書を読んでみたほうが良いかもなって気になりました。
以上、息抜きにタイマーを作ってたら案外大変だった話です。