▲TOPへ戻る

【javascript】setIntervalと、それを停止させるclearIntervalの使い方

setInterval
setIntervalを使うことで、以下のようなタイマーを作ることができます。
0

setIntervalとは

setInterval(関数, マイクロ秒) と記述し、関数マイクロ秒ごとに繰り返し、実行させることができます。

setIntervalの書き方

別に関数を作り、それを代入して実行

  let cnt = 0
  function count(){
    cnt++
    console.log(cnt);    
  }
  setInterval(count, 1000);

setIntervalの中に関数を書く

関数がそれほど複雑でなければ、setIntervalの中に直接関数を書く方が簡単です。
  let cnt = 0
  setInterval(function(){
    cnt++
    console.log(cnt);    
  }, 1000);
上の二つは、行っている処理は同じです。

setIntervalを停止するclearInterval

  1. 変数 timerId を宣言し、 setInterval関数を格納。
  2. if文で cnt が10になったら、
  3. clearInterval(timerId)で停止させる。
  let cnt = 0
  let timerId = setInterval(function(){   //➀
    cnt++
    if(cnt===10){   //➁
      clearInterval(timerId);   //➂
    }
    console.log(cnt);    
  }, 1000);
point

setInterval(関数, マイクロ秒) は、関数マイクロ秒ごとに繰り返し、実行させる。

clearInterval()でsetInterval()を停止させる。

参考

js
【javascript】setIntervalやclearIntervalを使ってできること
js
【Javascript】画像をランダム表示させ、ボードゲーム用のサイコロを作る

こんな記事も読まれています。

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<