JavaScriptで一定時間ごとに処理をする、タイマー処理を実装するコードを紹介します。この記事ではsetTimeoutを利用した実装コードを紹介します。
概要
JavaScriptでは直接Timerを実現するクラスはないため、一定時間後に処理を実行するsetTimeout()関数を利用して実現します。setTimeout関数の動作の詳細については
こちらの記事も参照してください。
プログラム
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function startTimer() {
setTimeout(onTimer, 500);
}
function onTimer() {
var obj = document.getElementById("output");
obj.innerText += "+";
setTimeout(onTimer, 500);
}
</script>
</head>
<body onload="startTimer();">
<div id="output"></div>
</body>
</html>
解説
ページ読み込み時にbodyのonloadイベントにより startTimer()関数が実行されます。startTimer()関数では、setTimeout()関数を呼び出します。第一引数にonTimer関数を与え、第二引数に500を与えているため、500msec後にonTimer()関数が実行されます。
onTimer()関数では、"output"IDのタグの要素を取得し、タグ内のテキストに"+"の文字を追加します。文字の追加後、setTimeout()関数を呼び出します。startTimer()関数と同様に、第一引数にonTimer関数を与え、第二引数に500を与えているため、500msec後にonTimer()関数が再帰的に実行されます。
実行結果
上記のHTMLファイルをWebブラウザで表示します。
ページが表示され0.5秒ごとに"+"の文字が追加されていきます。
開始、停止処理を実装する場合
開始、停止処理を実装するコードを紹介します。
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
var ExitFlag;
function startTimer() {
ExitFlag = false;
setTimeout(onTimer, 500);
}
function stopTimer() {
ExitFlag = true;
}
function onTimer() {
var obj = document.getElementById("output");
obj.innerText += "+";
if (ExitFlag == false) {
setTimeout(onTimer, 500);
}
}
</script>
</head>
<body>
<div id="output"></div>
<div><a href="javascript:void(0);" onclick="startTimer()">開始</a></div>
<div><a href="javascript:void(0);" onclick="stopTimer()">停止</a></div>
</body>
</html>
解説
タイマー処理の開始、停止を実装する場合は、停止のためのフラグを用意し、停止フラグがセットされている場合は、再帰呼び出しをキャンセルすることでタイマーの処理を停止しています。今回の実装例では、ExitFlagがtrueであれば、停止フラグが有効であると判断し、onTimer関数内でのsetTimeout関数の呼び出しをせずにタイマー処理を停止しています。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[開始]リンクをクリックします。画面に"+"の文字列が表示されます。時間とともに+の数が増えていきます。
[停止]リンクをクリックすると、"+"の増加が止まります。
このページのキーワード
- JSでのタイマー処理 一定間隔で処理を実行する (setTimeoutを利用)
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2017-12-26
作成日: 2016-07-26
