プログラミングではタイマー処理を行いたいことがあります。JavaScriptでは、指定時間後に関数を呼び出すsetTimeout()と、指定した時間間隔ごとに繰り返し関数を呼び出すsetInterval()があります。
ここでは、指定した時間間隔で関数を呼び出すsetInteval()について説明します。
setInterval()記述方法
setInterval()は、一定の時間間隔ごとに関数を繰り返し呼び出します。
書式は次のようになります。
|
1 |
変数 = setInterval('関数', 関数を呼び出す間隔); |
関数を呼び出す間隔はミリ秒単位で記述します。1秒が1000m秒です。左辺の変数にはタイマー番号が保存され、この番号はタイマーを停止する際に必要となります。タイマーを停止するには、次のように記述します。
|
1 |
clearInterval(タイマー番号); |
サンプルプログラム
次のサンプルプログラムは、5秒ごとに文字列「"Hello!"」をアラート表示する例です。
|
1 |
var interbalID = setInterval('alert("Hello!");', 5000) |
このままではアラート表示が永遠止まらないので、ボタンを押すと表示が止まるようします。
HTML
|
1 2 |
<input type="button" value="start" onclick="startInterval();"> <input type="button" value="stop" onclick="stopInterval();"> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 |
var intervalId; //タイマー番号をグローバル変数として宣言 //startボタンを押すと5秒間隔でalert()が実行 function startInterval(){ intervalID = setInterval('alert("Hello!");', 5000); } //stopボタンを押すとタイマーを停止 function stopInterval(){ clearInterval(intervalID); } |
