0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

setIntervalを即時関数でやるよ

Posted at

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?