JS：タイマー（setTimeout）によるイベント処理

この記事は、JavaScriptを使って、一定時間後に処理したい、あるいは時計などのように1秒ごとに時刻表示を行うなどの場合の方法を解説しています。応用としてデジタル時計も作ってみます。

タイマー処理の基本（setTimeout基本）
タイマー処理の応用
1. 再帰処理を使ってカウントアップする

タイマー処理の基本（setTimeout基本）

一定時間後に何か処理をしたい場合、setTimeout関数を用います。

setTimeout基本構文

setTimeout( 処理したい関数名, 経過時間ミリ秒単位);

例えば、5秒後に関数hogeを実行したいなら

setTimeout( hoge, 5000);

と記述します。

以下は、3秒後にメッセージを表示するプログラムです。

settimeout.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JS：タイマー処理の基本</title>

	<script>
		// 3秒後に呼び出す関数
		function message(){
			document.getElementById("message").innerHTML = "3秒たったよ！";
		}
		
		// 起動時の処理
		window.onload = function(){
			// 3秒後に関数messageを呼び出す
			setTimeout( message, 3000);
		}
	</script>
</head>

<body>
	<h1>JS：タイマー処理の基本</h1>
	<p id="message"></p>
</body>

</html>

実行イメージ

タイマー処理の応用

再帰処理を使ってカウントアップする

タイマーなどのカウントアップやカウントダウンは、関数の最後にsetTimeoutを使って自身を呼び出す（=再帰処理を行う）ことによって簡単に実現できます。

カウントアップサンプルを見る

以下に例を示します。

countup.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JS：再帰処理によるカウントアップ</title>
	<script>
		var count = 0;		// カウンタ用変数

		function counter(){
			// 表示
			document.getElementById("count").innerHTML = count;
			count++;
			// 1秒ごとに関数counterを再帰呼び出し
			setTimeout( counter, 1000);
		}

		// 起動時の処理
		window.onload = function(){
			counter();
		}
	</script>
</head>

<body>

	<h1>JS：再帰処理によるカウントアップ</h1>
	<p id="count">0</p>

</body>
</html>