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秒毎にカウントアップします