[JavaScript] 一定間隔で処理を実行する - setTimeoutを利用した JavaScriptでのTimer処理の実装

このページのタグ:[JavaScript] [Timer処理]
JavaScriptで一定時間ごとに処理をする、Timer処理を実装するコードを紹介します。この記事では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秒ごとに"+"の文字が追加されていきます。




開始、停止処理を実装する場合

開始、停止処理を実装するコードを紹介します。

コード


<!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ブラウザで表示します。下図の画面が表示されます。


[開始]リンクをクリックします。画面に"+"の文字列が表示されます。時間とともに+の数が増えていきます。




[停止]リンクをクリックすると、"+"の増加が止まります。


登録日 :2016-07-26    最終更新日 :2016-07-28
このページのタグ:[JavaScript] [Timer処理]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)