JavaScript タイマー

JavaScript 画面操作

今回はタイマーをやります。JavaScriptには、setInterval、setTimeoutという関数が用意されています。

setIntervalは指定時間毎に指定した関数を実行します。実行停止関数(clearInterval)を呼ぶまで何度も実行されます。

setTimeoutは指定時間後に指定した関数を実行します。一回実行したら終わりますが、実行停止関数(clearTimeout)も用意されています。

setInterval

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ストップウォッチ</title>
</head>
<body>
	
	<input type="button" id="id1" value="スタート" />
	<input type="button" id="id2" value="クリア" />
	<br />
	<br />
	<input type="text" id="id3" value="経過時間" />秒
</body>
<script type="text/javascript">
	var counter = 0;
	var timer = null;

	// カウンター
	function countup(){
		document.getElementById( "id3" ).value = counter;
		counter++;
	}

	// スタート、ストップボタンが押された時の処理
	document.getElementById( "id1" ).onclick = function(){
		if(timer == null){
			countup();
			timer = setInterval(countup , 1000);
			document.getElementById( "id1" ).value = "ストップ";
		}else{
			clearInterval(timer);
			timer = null;
			document.getElementById( "id1" ).value = "スタート";
		}
	};


	// クリアボタンが押されたときの処理
	document.getElementById( "id2" ).onclick = function(){
		counter = 0;
		document.getElementById( "id3" ).value = counter;
	};

</script>
</html>

setIntervalの引数は、setInterval(実行する関数,実行間隔)のようになっています。
実行間隔はミリ秒指定です。上記の例では1000ミリ秒なので1秒間隔になります。

clearInterval関数でタイマー実行を取り消しています。

実行イメージ

スタートボタンを押すと、カウントアップし、もう一度押すと止まります。
クリアボタンを押すとカウントがクリアされます。

setTimeout

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>いいねカウンター</title>
</head>
<body>
	
	<input type="button" id="id1" value="いいね" />
	<input type="button" id="id2" value="クリア" />
	<br />
	<br />
	<input type="text" id="id3" value="いいねカウント" />
</body>
<script type="text/javascript">
	var counter = 0;
	var seq = 0;
	var timer = null;

	// カウンター
	function countup(){
		timer = null
		counter++;
		seq--;
		if(seq > 0){
			document.getElementById( "id3" ).value = "カウント中：" + counter;
			timer = setTimeout(countup , 1000);
		}else{
			document.getElementById( "id3" ).value = "カウント完：" + counter;
		}
	}

	// いいねボタンが押された時の処理
	document.getElementById( "id1" ).onclick = function(){
		seq++;
		if(seq == 1){
			timer = setTimeout(countup , 1000);
		}
	};


	// クリアボタンが押されたときの処理
	document.getElementById( "id2" ).onclick = function(){
		counter = 0;
		seq = 0;
		if(timer != null){
			clearTimeout(timer);
			timer = null;
		}
		document.getElementById( "id3" ).value = counter;
	};

</script>
</html>

setTimeoutの引数は、setTimeout(実行する関数,実行開始までの時間)のようになっています。
実行開始までの時間はミリ秒指定です。上記の例では1000ミリ秒なので1秒間隔になります。

実行イメージ

いいねボタンを押すとカウントアップしていきます。
クリアボタンを押すとカウントがクリアされます。

無名関数

関数を定義してsetInterval、setTimeoutに渡すのではなく、setInterval、setTimeoutで直接関数を定義することもできます。

				
	timer = setInterval(function () {
		document.getElementById("id3").value = counter;
		counter++;
	}, 1000);

	timer = setTimeout(function () {
		document.getElementById("id3").value = counter;
		counter++;
	}, 1000);

ページのトップへ戻る