JavaScriptのsetIntervalでタイマー処理をする方法【初心者向け】

JavaScriptを勉強していると

一定時間ごとに処理を繰り返したい

という場面もあるのではないでしょうか。

今回は初心者の方に向けて、

・setIntervalで一定時間ごとに処理を繰り返す方法
・clearIntervalで一定時間ごとの処理を解除する方法

をご紹介します。

ぜひ参考にしてみてくださいね。

目次 [非表示]

1 setIntervalで一定時間ごとに処理を繰り返す
2 clearIntervalで一定時間ごとの処理を解除する
3 まとめ

setIntervalで一定時間ごとに処理を繰り返す

setIntervalを使えば、一定時間ごとに処理を繰り返すことができます。書き方はこちら。

setInterval(関数, ミリ秒)

繰り返したい処理を指定した関数とミリ秒数を指定することで、ミリ秒数の間隔で関数を実行できます。また、この処理はWEBページを開いている間はずっと繰り返されます。

では実際のコードを見てみましょう。

var count = 0;

function timer1(){
  count += 1;
  console.log(count);
}

setInterval(timer1, 1000);

var count = 0;

function timer1(){

count += 1;

console.log(count);

}

setInterval(timer1, 1000);

実行結果

このように、1000ミリ秒ごとにcountが+1され続けていきます。

clearIntervalで一定時間ごとの処理を解除する

次に、setIntervalで設定した処理を解除してみましょう。書き方はこちら。

clearInterval(setIntervalで指定した処理)

これだけで、setIntervalの処理を解除できます。

では実際のコードを見てみましょう。以下のコードではcountが10になった時に処理を解除しています。

var count = 0;

function timer2(){
  count += 1;
  console.log(count);

  if(count === 10){
    clearInterval(interval);
  }
}

var interval = setInterval(timer2, 1000);

var count = 0;

function timer2(){

count += 1;

console.log(count);

if(count === 10){

clearInterval(interval);

}

var interval = setInterval(timer2, 1000);

実行結果

このように、countが10になったところで処理が終了し、数が増えなくなっています。

まとめ

いかがだったでしょうか？

今回はJavaScriptで処理を繰り返す方法について、

・setIntervalで一定時間ごとに処理を繰り返す方法
・clearIntervalで一定時間ごとの処理を解除する方法

をご紹介しました。

setIntervalとclearIntervalを組み合わせて使うことで、より多彩な表現ができるはずです。ぜひ参考にしてみてくださいね。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。