この記事は、JavaScriptを使って、一定時間後に処理したい、あるいは時計などのように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>
コメント