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

プログラミング初心者向けに、JavaScriptで【setTimeout】を使う方法を解説した記事です。setTimeoutは、繰り返さずに一度だけ、一定時間後に特定の処理を行うことができます。clearTimeoutも合わせて紹介。

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

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

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

 

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

 

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

 

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

 

タイマー処理とは

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

 

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

 

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

 

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

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

 

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

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

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

 

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

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

 

20160620

 

タイマー処理というのは、時間になったらプログラムを実行してくれるというものですか?

 

20163020-2

 

少し違うかな。今回のタイマー処理は、指定した一定時間ごとに実行してくれるものなんだよ。

 

20160620

 

繰り返して実行してくれるんですね。

 

20163020-2

 

そうそう。ゲームなどでは必ずタイマー処理が使われてるんだよ。今回はsetTimeout関数を見てみよう!

 

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

この記事では、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ミリ秒後に呼び出したいとします。次のようにsetTimeoutを追加します。

 

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

 

setTimeoutでは一度きりしか呼び出されないので、0が1000ミリ秒後に出力されて終わりました。

0

 

setTimeoutの基本的な使い方は以上です。応用編として、setTimeoutでsetIntervalのような繰り返し処理をおこなう方法を解説します。

 

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

setTimeoutでsetIntervalのような繰り返しの処理をする方法

やり方は非常に単純です。繰り返し処理の関数のなか、つまり{  }内にsetTimeoutを記述し、countup();で呼び出し実行します。

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

こうすることで、一度処理が終わった地点から1000ミリ秒後にまた同じ処理を繰り返すようになります。

ブラウザで出力すると、次のようになります。setIntervalと同じような挙動の処理になりました。

setTimeout

しかし、このままでは繰り返し処理がとまらず、カウントは半永久的に続いてしまいます。

 

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

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

 

clearTimeoutでsetTimeoutの処理を停止する

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

var id = setTimeoutl(countup, 1000);

 

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

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

 

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

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

012345

 

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

 

setIntervalでの繰り返し処理とsetTimeoutでの繰り返し処理の違い

え? ちょっと待って! 同じ繰り返し処理なら、わざわざsetTimeoutを使わずsetIntervalを使ってプログラムを書けばいいんじゃないの?? と思ったかた。実は、両者には微妙な違いがあります。

 

  • setIntervalで繰り返し処理をおこなった場合:処理開始時点から一定時間後に同じ処理を繰り返す
  • setTimeoutで繰り返し処理をおこなった場合:処理終了時点から一定時間後に同じ処理を繰り返す

 

よって、同じ1000ミリ秒後で時間を指定したとしても、次の処理がはじまるまでに要する時間がずれるのです。

また、処理1回分に要する時間がインターバルの時間を超えてしまうと、挙動に不具合が生じてしまいます。処理と処理のあいだに確実に一定の余裕を保ちたいなら、setTimeoutを使うようにしましょう。

 

今回の記事は以上です。

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

 

20160620

 

setIntervalとsetTimeoutの違いってあるんですか?どちらも、関数を指定して、実行する間隔を指定しますよね?

 

20163020-2

 

setTimeoutって基本的に次に実行するものを指定するだけなんだよね。なので、工夫して呼び出してあげないと1回の実行で終了してしまうんだ。

 

20160620

 

なるほど。setIntervalのほうはどうでしょうか?

 

20163020-2

 

setIntervalは、定期的な繰り返しなので、何度もsetIntervalを呼び出してしまうと、呼び出した数と同じ分だけプログラムが定期的に実行されてしまうんだ。違いを覚えておこう!

 

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