JavaScript setInterval デモ

概要：このチュートリアルでは、JavaScript のsetInterval()を使用して、一定の間隔で関数を繰り返し呼び出す方法を学びます。

JavaScript setInterval() の概要

setInterval()は、windowオブジェクトのメソッドです。setInterval()は、一定の間隔で関数を繰り返し呼び出します。

以下に、setInterval()の構文を示します。

let intervalID = setInterval(callback, delay,[arg1, arg2, ...]);
Code language: JavaScript (javascript)

この構文では

callbackは、delayミリ秒ごとに実行されるコールバック関数です。
delayは、コールバック関数の実行間隔を遅延させる時間（ミリ秒単位）です。
arg1, … argNは、コールバック関数に渡される引数です。

setInterval()は、作成されたタイマーを識別する数値（ゼロ以外）を返します。intervalIDをclearInterval()に渡して、タイムアウトをキャンセルできます。

setInterval()は、setTimeout()のように動作しますが、指定された遅延時間ごとにコールバックを繰り返し実行することに注意してください。

JavaScript setInterval() の例

次の例では、[開始]ボタンを押すと、1秒ごとに見出しの色を変更するためにsetInterval()とclearInterval()を使用しています。ボタンを停止すると、clearInterval()がタイムアウトをキャンセルします。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>JavaScript setInterval Demo</title>

  <script>
    let intervalID;
 
    function toggleColor() {
      let e = document.getElementById('flashtext');
      e.style.color = e.style.color == 'red' ? 'blue' : 'red';
    }

    function stop() {
      clearInterval(intervalID);
    }

    function start() {
       intervalID = setInterval(toggleColor, 1000); 
    }
  </script>
</head>
 
<body>
  <p id="flashtext">JavScript setInterval Demo</p>
  <button onclick="start()">Start</button>
  <button onclick="stop()">Stop</button>
  
</body>
</html>Code language: HTML, XML (xml)

出力

JavaScript setInterval デモ

概要

setInterval()は、一定の間隔で関数を繰り返し呼び出します。
setInterval()は、タイムアウトをキャンセルするためにclearInterval()に渡すことができるtimeoutIDを返します。

このチュートリアルは役に立ちましたか？