この記事は、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>
コメント