JavaScriptでのタイマー処理の方法:setInterval()

プログラミングではタイマー処理を行いたいことがあります。JavaScriptでは、指定時間後に関数を呼び出すsetTimeout()と、指定した時間間隔ごとに繰り返し関数を呼び出すsetInterval()があります。

ここでは、指定した時間間隔で関数を呼び出すsetInteval()について説明します。

setInterval()記述方法

setInterval()は、一定の時間間隔ごとに関数を繰り返し呼び出します。

書式は次のようになります。

変数 = setInterval('関数', 関数を呼び出す間隔);

関数を呼び出す間隔はミリ秒単位で記述します。1秒が1000m秒です。左辺の変数にはタイマー番号が保存され、この番号はタイマーを停止する際に必要となります。タイマーを停止するには、次のように記述します。

clearInterval(タイマー番号);

サンプルプログラム

次のサンプルプログラムは、5秒ごとに文字列「"Hello!"」をアラート表示する例です。

var interbalID = setInterval('alert("Hello!");', 5000)

このままではアラート表示が永遠止まらないので、ボタンを押すと表示が止まるようします。

HTML

<input type="button" value="start" onclick="startInterval();">
<input type="button" value="stop" onclick="stopInterval();">

JavaScript

var intervalId; //タイマー番号をグローバル変数として宣言

//startボタンを押すと5秒間隔でalert()が実行
function startInterval(){
	intervalID = setInterval('alert("Hello!");', 5000);
}

//stopボタンを押すとタイマーを停止
function stopInterval(){
	clearInterval(intervalID);
}

イベント