JavaScriptのsetTimeoutとsetIntervalを理解しマスターする

WEBページの動作をもっと魅力的にしたり、便利にしたりするのに、JavaScriptのいろんな機能が役立っています。ブラウザーなどで、ページが表示されてから一定時間後に表示を変更したり、ページを遷移させたいというときには、setTimeoutとsetIntervalという関数を使い分けて、実現できます。
この記事では、タイマー機能の使い方を解説します。

JavascriptのsetTimeoutはタイマー機能

タイマーで処理を実行するタイミングを制御

setTimeout関数は、関数が実行されてから関数内で指定した時間の分だけ時間が経過した後に、特定の動作をさせたいという場合に使うことができる関数です。設定した時計の時間になったら作動するというわけではないことに注意してください。

setTimeoutは、指定した時間後に一度だけ動作するもので、指定した時間ごとに何度も動作させたい場合は、setIntervalという別の関数を使います。setIntervalは、読み込まれてから延々と実行され続けますが、clearInterval関数で、タイマーをとめることができます。

setTimeoutとsetIntervalは、タイマーを扱うという意味で似ている関数ですが、使い方が異なります。

setTimeout関数の引数

setTimeout関数には、2つの引数があります。1つめの引数には、指定した時間が経過した後に実行するプログラムをファンクションの型で持たせます。2つめの引数には、1つめの引数に設定したプログラムの実行を開始するまでの時間を持たせます。時間は、ミリ秒の単位で記載します。1秒後に実行したいのであれば、2つめの引数の値は「1000」となります。

setInterval関数も同じで2つの引数を持ち、1つめに実行するプログラムを、2つめに実行する時間の感覚をミリ秒で指定するようになっています。sclearInterval関数は、1つだけ引数を持ちます。止めるタイマーを指定します。指定するためには、setInterval関数の返り値を変数に取得しておいて、clearInterval関数の引数に入れる必要があります。

JavaScriptのsetTimeoutを使う

タイマーを使うタイミング

どんなときにJavaScriptのsetTimeoutを使うのでしょうか。
たとえば、WEBページが画面上に表示されてからすぐではないタイミングでアラートを表示させたいというときに、出したいタイミングのミリ秒を2つめの引数に設定するときです。
または、サーバーなどに登録されているステータスが更新されるのを待っているというときにも使えます。数秒後にリロードさせるために、setTimeoutを使って再読み込みし、サーバー側の最新の状態を確認することができるようになります。
さらに、ある一定の時間経過したらログアウトさせたいというときにも、この関数を使うとよいでしょう。途中で、画面の操作が入力されたらタイマーをキャンセルして、もう一度最初からタイマーをカウントさせるということもできます。

setIntervalを使うタイミングは、スライドショーなど、画面上に表示させてあるものを変更したり動かしたりするときによく使われます。clearIntervalで停止させない限りずっと同じ間隔で画像の変更というプログラムを実行しているので、スライドショーのように動いてくれるのです。

タイマーをセットする

setTimeoutのタイマーをセットするには、下記の例のように書きます。

setTimeout(function(){console.log("10秒経過しました")},10000);

引数にファンクションが入っていると可読性が低くなってしまうので、下記の例のように、ファンクションを変数に入れておくこともできます。

var fn = function() {
  console.log("10秒経過しました");
};
var tm = 10000;
setTimeout(fn,tm);

引数をスッキリさせるだけで、見やすくなりましたね。

タイマーをキャンセルする

setTimeoutのタイマーをキャンセルさせたいなら、clearTimeout関数を使って、タイマーを停止させます。clearTimeoutには、setTimeoutの返り値が必要です。どのように返り値を取得して、キャンセルできるかを見てみましょう。

var fn = function() {
  alert("10秒経過しました");
};
var tm = 10000;
var id = setTimeout(fn,tm);
function clickStop (){
  clearTimeout(id);
}

「Stop!」このリンクで起動します。「Stop!」ボタンを押したらタイマーが停止されて、アラートのダイアログが表示されないようになるプログラムです。clearTimeoutのために、setTimeoutの返り値を変数「id」に格納しているところがポイントです。

タイマーを連続的に作動させる（setInterval）

setIntervalのタイマーをセットするにも、同じように下記の例のように書きます。

var fn = function() {
  alert("10秒経過しました（" + i + "回目）");
  i++;
};
var tm = 10000;
var i = 1;
setInterval(fn,tm);

setIntervalが10秒ごとに、延々と繰り返されるようになっています。

setIntervalの繰り返しの数に制限をかけたいなら、タイマーをキャンセルするために、clearIntervalを使います。clearIntervalでも、setIntervalの返り値が必要で、setTimeoutのときと同じようなプログラムを書きます。例で見てみましょう。

var fn = function() {
  alert("10秒経過しました（" + i + "回目）");
  if(i > 5) clearInterval(id);
  i++;
}
var tm = 10000;
var i = 1;
var id = setInterval(fn,tm);

この例では、5回繰り返したら、clearIntervalでタイマーが止まるようになっています。clearIntervalの引数に、変数「id」を格納していますね。

まとめ

WEBページの動作をより便利にするのに、JavaScriptのタイマー機能を使えるようになると良いですね。
一回限りのタイマーの関数であるsetTimeoutと、何度も同じタイミングで動作を繰り返せるsetIntervalをマスターして、確実にプログラミングを覚えていきましょう。