JavaScriptでsetIntervalを使う方法【初心者向け】

プログラミング初心者向けに、JavaScriptで【setInterval】を使う方法を解説した記事です。本記事では、setIntervalのタイマー処理でカウントアップ、処理を停止する方法を紹介します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptでsetIntervalを使う方法について解説します。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

タイマー処理とは

Webを見ていて、スライドショーなど、一定時間ごとに画像や文字が切り替わったりする動的な動きを見たことがあるのではないでしょうか。

 

これは、JavaScriptのタイマー処理という処理で実装することができます。

 

タイマー処理にはsetIntervalとsetImeoutの2種類があります。両者はとても似たJavaScriptの関数ですが、少し挙動が異なります。

 

<2種類の タイマー処理>

  • setInterval…一定時間ごとに特定の処理を繰り返す
  • setTimeout…一定時間後に特定の処理をおこなう(繰り返さずに一度だけ)

 

どちらも基本的なプログラムは次のようになります。

setInterval(関数function, 一定時間の指定[, 引数1, 引数2, …])

setTimeout(関数function, 一定時間の指定[, 引数1, 引数2, …])

 

finctionは関数の定義、コンマで区切って一定時間の指定(ミリ秒)、functionが引数をとる場合には[ ]のなかで指定します。

※注意:setIntervalの「I」、setTimeoutの「Tは大文字で記述しましょう。小文字で書くとプログラムが実行されません

 

20160620

 

田島メンター!タイマー処理というのは何でしょうか?

 

20163020-2

 

ある一定時間ごとに、繰り返し処理してくれる関数なんだよ。

 

20160620

 

何秒か置きに実行してくれるという感じですか?

 

20163020-2

 

そうそう。ブラウザゲームに使われたりもするんだ。ゲームって定期的に同じ関数を繰り返してマップとかを描画してるんだよね。では、setIntervalのほうを見てみよう!

 

setIntervalでタイマー処理をおこなう

この記事では、setIntervalでタイマー処理をおこなう方法について解説します。setTimeoutでのタイマー処理は、こちらをご覧ください。

まずは、簡単な関数を用意します。

 

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
      var count = 0;
      var countup = function(){
        console.log(count++);
      
    </script>
  </body>
</html>

 

countという変数を用意し、0を基準に1ずつカウントを足して(count++)いったものをconsole.logで出力します。そして、この一連の処理をさらにcountupという変数に入れています。

 

この変数countupの処理を1000ミリ秒ごと繰り返したいとします。次のようにsetIntervalを追加します。

 

<script>
  var count = 0;
  var countup = function(){
    console.log(count++);
  
  setInterval(countup, 1000);
</script>

 

出力すると次のようになります。このままでは、繰り返し処理がとまらず、カウントは半永久的に続いてしまいます。

setInterval

では、繰り返し処理を指定した箇所でストップさせるにはどうしたら良いでしょう。

そのためには、clearIntervalを追加します。

 

clearIntervalでsetIntervalの処理を停止する

まずは、idを使ってさきほどのsetInterval(countup, 1000);をまとめましょう。

var id = setInterval(countup, 1000);

 

このidをclearIntervalで指定することで、setIntervalの処理を好きなタイミングでストップさせることができます(処理を止めるからclearですね)。

<script>
  var count = 0;
  var countup = function(){
    console.log(count++);
  }
  var id = setInterval(function(){
    countup();
    if(count > 5){ 
      clearInterval(id); //idをclearIntervalで指定している
    }}, 1000);
</script>

 

上のプログラムでは、setIntervalの繰り返し処理が実行されcountupが5より多くなったとき(if(count > 5))、clearIntervalが実行されます。

よって、5まででカウントでストップします。

012345

 

これで、setIntervalを使って繰り返しのタイマー処理をしたり、clearItervalを合わせて実行を止めるといったことができるようになりました。

 

今回の記事は以上です。

JavaScriptでsetTimeoutを使う方法の記事もあるので合わせてご覧ください。

 

20160620

 

止めない限りずっと処理が続いてしまうんですか?

 

20163020-2

 

setIntervalのほうはデフォルトでそうなってるね。ブラウザを閉じても止まるよ。

 

20160620

 

JavaScriptってブラウザで動いてたんでしたっけ。ブラウザを閉じてもいいんですね。

 

20163020-2

 

そうそう。アクセスして来てくれた人のブラウザで動いているから、プログラムの負荷なんかも相手のブラウザが負担してくれるんだよ。

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。