MENU
  1. ホーム
  2. JS
  3. JavaScript
  4. setInterval

setInterval

JavaScript
2024.02.10

setIntervalは、一定の時間間隔ごとに指定した関数を繰り返し実行します。

setIntervalの説明図
setInterval
記法

//　繰り返し起動
var 変数名 = setInterval(関数など, ms秒);
//　繰り返し解除
clearInterval(変数名);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>setIntervalに関して</title>
  </head>

  <body>
    <p>1秒毎にカウントアップします</p>
    <button id="setInterval_btn">クリックしてみて♡</button>
    <button id="clear_btn" disabled>クリアボタン</button>
    <label id="label">0</label>
    <script src="main.js"></script>
  </body>
</html>
// 変数指定
let count = 0;

// 要素を取得
let btn = document.getElementById("setInterval_btn");
let clear_btn = document.getElementById("clear_btn");
let label = document.getElementById("label");

// 1秒ごとにカウントアップする関数
function countUp() {
  count++;
  label.innerText = count;
}

// ボタンにクリックイベントリスナー
btn.addEventListener("click", function () {
  //　活性・非活性の制御
  btn.disabled = true;
  clear_btn.disabled = false;

  // 1000ミリ秒（1秒）ごとにcountUp関数を実行
  var timer = setInterval(countUp, 1000);

  // クリアボタンにクリックイベントリスナー
  clear_btn.addEventListener("click", function () {
    count = 0;
    label.innerText = count;

    //　活性・非活性の制御
    btn.disabled = false;
    clear_btn.disabled = true;

    // setInterval をキャンセル
    clearInterval(timer);
  });
});
出力結果

1秒毎にカウントアップします

JavaScript