JS/ES – interval – TauStation

概要

WindowOrWorkerGlobalScopeのsetInterval()メソッドは一定間隔で関数を実行し、clearInterval()メソッドはこれを停止する。

書式

timer_id = setInterval(function, interval);

clearInterval(timer_id);

function

一定時間間隔で実行させる関数を指定する。
interval: functionを実行させる時間間隔をミリ秒単位で与える。

setInterval()は、戻り値として実行中のタイマーのidを整数で返す。clearInterval()の引数にこのタイマーidを指定して、実行中のタイマーを停止させる。

実行例

以下の例ではページに1つのp要素と2つのボタンを配置する。

startボタンを押すとカウントが始まり、1秒ごとに増加するカウンターの値がp要素に表示される。

stopボタンを押すとカウントアップが停止される。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>interval demo</title>
    <script>
      var counter_area;
      var counter = 0;
      var timer_id;
      var timer_is_running = false;

      function count_up() {
        counter_area.innerHTML = counter++;
      }

      function start() {
        if (!timer_is_running) {
          timer_id = setInterval(count_up, 1000);
          timer_is_running = true;
        }
      }

      function stop() {
        if (timer_is_running) {
          clearInterval(timer_id);
          timer_is_running = false;
        }
      }

      window.onload = () => {
        counter_area = document.getElementById('counter_area');
        document.getElementById('btn_start').addEventListener('click', start, false);
        document.getElementById('btn_stop').addEventListener('click', stop, false);
      }
    </script>
  </head>
  <body>
    <p id="counter_area">0</p>
    <button id="btn_start">start</button>
    <button id="btn_stop">stop</button>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>interval demo</title>

var counter_area;

var counter = 0;

var timer_id;

var timer_is_running = false;

function count_up() {

counter_area.innerHTML = counter++;

}

function start() {

if (!timer_is_running) {

timer_id = setInterval(count_up, 1000);

timer_is_running = true;

}

function stop() {

if (timer_is_running) {

clearInterval(timer_id);

timer_is_running = false;

}

window.onload = () => {

counter_area = document.getElementById('counter_area');

document.getElementById('btn_start').addEventListener('click', start, false);

document.getElementById('btn_stop').addEventListener('click', stop, false);

}

</script>

</head>

<body>

<button id="btn_start">start</button>

</body>

</html>

概要

書式

実行例

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル