11. タイマー

一定間隔で何かを行いたい、そんなときに使えるのがタイマーです。
JavaScriptを使ってアニメーションを行う場合などによく利用されます。

タイマーを実現する関数として、指定間隔で繰り返し呼ばれるsetInterval()関数と、指定時間経過後に一度だけ呼ばれるsetTimeout()関数の2つがあります。
また、設定したタイマーを解除するために、clearInterval()関数、clearTimeout()関数がそれぞれ用意されています。
それでは、以下をテキストエディタ等で入力してください。はじめは内容がよく分からなくても、実際に打ち込んでいくなかで、次第に分かるようになってきます。

リスト11: lesson11.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson11</title>
  </head>
  <body>
    <canvas id="myCanvas" width="300px" height="300px"></canvas>
    <script>
      let repeat   = 100;
      let counter  = 0;
      let interval = 50;
      let timerId;

      function draw() {
        let canvas = document.getElementById("myCanvas");
        let context = canvas.getContext("2d");
        let width  = canvas.width;
        let height = canvas.height;
        let r = Math.min(width, height) / 2 * counter / repeat;

        // Clear canvas
        context.clearRect(0, 0, width, height);

        // Draw circle
        context.beginPath();
        context.arc(width / 2, height / 2, r, 0, Math.PI * 2, true);
        context.fillStyle = "skyblue";
        context.fill();

        // Increase counter
        counter++;
        if (counter > repeat) {
          clearInterval(timerId);
        }
      }

      window.onload = function() {
        timerId = setInterval(draw, interval);
      }
    </script>
  </body>
</html>

保存したファイルをWebブラウザで開くと、50ミリ秒単位で100コマからなる簡単なアニメーションが実行されますす。

【解説】

setInterva()関数lの書式は以下の通りです。
　setInterval(処理, 実行間隔[ms])
処理には定義した関数名を指定するか、または引用句で括って、実行したい内容を記述してください。上記の例では、第一引数の draw となっている箇所は、”draw()”でも構いません。