JavaScriptのタイマー処理 setIntervalの使い方
一定時間ごとに表示が変わったりするwebサイトはよく見かけます。
トップページで画像が切り替わったりするのが代表的ですね。（まぁ、実際そういうのは、プラグインとかがいっぱいあるので、自分でコードを書くことはほとんどないかもしれませんが・・・）
ブラウザで、ある一定時間ごとに動的処理を行いたい場合、JavaScriptの「タイマー処理」で実現できます。
実際の使い方について紹介します。
タイマー処理とは
「タイマー処理」とは、指定する一定時間で命令を実行するプログラムです。
上述しているような、画像を一定時間で表示を切り替えたり、文字を切り替えたり。
もうちょっと高度になると、サーバー側（データベース）からの情報取得を一定期間ごとに行う、なんてこともできます。
それをブラウザ上で実行するためには、JSの関数を活用します。
JSのタイマー処理を実現する二つの関数とその違い
JSのタイマー処理を実現する関数は、２種類あります。
「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秒ごとに ＋１ された数字がdiv要素内に表示されるということになります。
これはとても単純な事例ですが、ajaxなんかと一緒に使うことで、サーバー側の情報を一定期間非同期で取得して表示する、なんてちょっと高度なことも簡単にできる、便利な関数ですね！
