JavaScript タイマーを設定・解除する
指定時間後に処理を行うには、「setTimeout()」メソッドを使います。setTimeout()メソッドの最初のパラメータに実行する処理（文字列で命令を囲むか、無名関数で処理を記述する）、2番目のパラメータにはミリ秒を指定します。ただし、２番目に指定したミリ秒後に必ずしも処理が実行される保証はありません。環境によっては、指定したミリ秒より後に実行されることがあります（指定したミリ秒より前実行されることはない）。setTimeout()でタイマーを設定すると、戻り値としてタイマーIDが返されます。タイマーを停止させる場合は「clearTimeout()」メソッドを使い、パラメータにタイマーIDを指定します。このタイマーIDは、setTimeout()メソッドの戻り値になります。
setTimeout()メソッドの3番目のパラメータ
setTimeout()メソッドには、3番目のパラメータを指定することができます（IE除く）。3番目以降のパラメータは、setTimeout()メソッドで呼び出される関数のパラメータとして渡されます。たとえば、次のように1秒後にアラートダイアログにメッセージが表示されます。
timerID = setTimeout(function(msg){
alert(msg);
}, 1000, "test message");<body>
<script>
window.addEventListener("load" , function(){
var ele = document.getElementsByTagName("output");
//タイマーIDを入れる変数を用意
var timerID = null;
//開始ボタンにイベントを割り当て
document.getElementById("startBtn").addEventListener("click", function(){
if(!timerID){
ele[1].innerHTML = "タイマーを起動させました";
//1秒ごとに時間を表示
timerID = setTimeout(function(){
//時間表示
ele[0].innerHTML = new Date();
//現在のタイマーをさらに呼び出し
timerID = setTimeout(arguments.callee, 1000);
},1000);
}else{
ele[1].innerHTML = "すでにタイマーは起動中です";
}
}, false);
//終了ボタンにイベントを割り当て
document.getElementById("stopBtn").addEventListener("click", function(){
if(!timerID){
ele[1].innerHTML = "タイマーは停止しています";
}else{
ele[1].innerHTML = "タイマーを停止させました";
clearTimeout(timerID);
timerID = null;
}
},false)
}, false);
</script>
<form>
<input type="button" value="タイマー開始" id="startBtn">
<input type="button" value="タイマー終了" id="stopBtn">
</form>
<output></output><br>
<output></output>
</body>タイマー開始ボタンをクリックするとタイマーがスタートして、現在時刻が1秒ごとに表示されます。
さらにタイマー開始ボタンをクリックすると、タイマー動作中のメッセージが表示されます。
タイマー終了ボタンをクリックすると、タイマーが停止します。
