X

JavaScriptのタイマー処理 setIntervalの使い方

一定時間ごとに表示が変わったりするwebサイトはよく見かけます。

トップページで画像が切り替わったりするのが代表的ですね。(まぁ、実際そういうのは、プラグインとかがいっぱいあるので、自分でコードを書くことはほとんどないかもしれませんが・・・)

ブラウザで、ある一定時間ごとに動的処理を行いたい場合、JavaScriptの「タイマー処理」で実現できます。

実際の使い方について紹介します。

タイマー処理とは

「タイマー処理」とは、指定する一定時間で命令を実行するプログラムです。

上述しているような、画像を一定時間で表示を切り替えたり、文字を切り替えたり。
もうちょっと高度になると、サーバー側(データベース)からの情報取得を一定期間ごとに行う、なんてこともできます。

それをブラウザ上で実行するためには、JSの関数を活用します。

JSのタイマー処理を実現する二つの関数とその違い

JSのタイマー処理を実現する関数は、2種類あります。

「setInterval」と「setTimeout」です。

両者の違いは、

setInterval:指定する一定時間ごとに処理を実行する(繰り返す)

setTimeout:指定する一定時間後に処理を実行する(一回だけ)

です。
目的に応じて使い分けましょう。

setIntervalの実装方法

ここでは、「setInterval」 つまり、一定時間ごとに処理を繰り返すタイマー処理について、見ていきたいと思います。

今回の例は、

「1秒ごとに、数字をカウントアップ表示する」を実現したいと思います。

まずは、デモサイトをご覧ください。

カウントアップのデモ

※永久にカウントアップされるので、適当なタイミングでブラウザを閉じてください(汗)。

では、上記を実現するためのコードはどんな感じか。下記をご覧ください。

【html】

<h2 id="index">1秒ごとにカウントアップ!</h2>

<div id="count_up">
   
</div>

【js(jQueryで書いてます)】

<script>
$(function(){
  var count = 1;
  var countup = function(){
    $('#count_up').text(count);
    count = count + 1;
  }
  setInterval(countup, 1000);
});
</script>

こんな感じです。

setIntervalの基本構文は、

setInterval(実行したい関数, 実行間隔ミリ秒])

です。

上記のデモサイトでは、

タイマー処理したい内容、すなわち、カウントアップ処理関数を countup で定義しています。

関数 countup では、htmlのdiv要素に、変数countを表示させるようにしています。
表示させたら、countに+1してます。

それをsetInterval内で指定し、その処理をどのくらいの間隔で繰り返すかを設定しています。

秒数の指定は、「ミリ秒」なので、1秒ごとに処理したい場合は、”1000”と指定すれば良いわけです。

これで、1秒ごとに +1 された数字がdiv要素内に表示されるということになります。

これはとても単純な事例ですが、ajaxなんかと一緒に使うことで、サーバー側の情報を一定期間非同期で取得して表示する、なんてちょっと高度なことも簡単にできる、便利な関数ですね!

shirushiru: