一定間隔で処理を実行する / タイマーの利用 (setInterval を利用) - JavaScript

タイマーを利用して、JavaScriptで一定時間ごとに処理をするコードを紹介します。この記事ではsetIntervalを利用した実装コードを紹介します。

概要

JavaScriptでは直接Timerを実現するクラスはないため、一定時間後に処理を実行するsetInterval()関数を利用して実現します。

プログラム

コード

下記の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() {
      setInterval(onTimer, 500);
    }

    function onTimer() {
      var obj = document.getElementById("output");
      obj.innerText += "*";
    }


  </script>
</head>
<body onload="startTimer();">
  <div id="output"></div>
</body>
</html>

解説

body タグのonloadイベントにより、startTimer()関数が呼び出されます。startTimer()関数内では、setInterval 関数を呼び出しています。第一引数にonTimer関数を与え、第二引数に500を与えています。この処理により、onTimer関数が500msecごとに呼び出されます。
onTimer()関数内では、"output"のIDを持つタグ要素を取得し、テキストに"*"の文字を追加しています。

実行結果

上記の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 THandle;

    function startTimer() {
      THandle = setInterval(onTimer, 500);
    }

    function stopTimer() {
      clearInterval(THandle)
    }

    function onTimer() {
      var obj = document.getElementById("output");
      obj.innerText += "*";
    }


  </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>

解説

setInterval()を停止するには、clearInterval()関数を呼び出します。clearInterval()関数の第一引数には、停止するsetInterval()のハンドルを与えます。ハンドルは、setInterval()関数を呼び出した際の戻値です。setIntervalのハンドルは変数に格納し、stopTimer()関数からも参照可能な状態にします。