setIntervalを即時関数でやるよ

初めに

　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は参考書を読んだわけではなく、適当にサンプルコードを見て学んだので理解してないところは多いのですが、参考書を読んでみたほうが良いかもなって気になりました。
　以上、息抜きにタイマーを作ってたら案外大変だった話です。