JavaScriptのsetInterval・clearIntervalとは?一定間隔で処理を繰り返すタイマーの使い方
setInterval() は、指定した時間ごとに繰り返し処理を実行するためのメソッドです。
また、clearInterval() を使うことで、設定したタイマーを停止できます。
時間はミリ秒(1秒=1000ミリ秒)で指定します。
setIntervalメソッドとは?
setInterval() は、指定した間隔で関数を繰り返し実行します。
停止しない限り、永続的に処理が続きます。
書式:
使用例:0.5秒ごとに関数を実行
→ 0.5秒(500ミリ秒)ごとに msg() が繰り返し実行されます。
clearIntervalメソッドとは?
clearInterval() は、setInterval() で設定したタイマーを停止するメソッドです。
タイマーを解除するには、setInterval() の戻り値(タイマーID)を変数に保存しておく必要があります。
使用例:設定したタイマーを解除
→ timer2 に設定された繰り返し処理が停止します。
実際のサンプル:カウントアップタイマー
let count = 0;
let timer;
function startCount() {
timer = setInterval(() => {
count++;
document.getElementById(‘num’).textContent = count;
}, 1000);
}
function stopCount() {
clearInterval(timer);
}
</script>
<div>カウント:<span id=”num”>0</span></div>
<button onclick=”startCount()”>開始</button>
<button onclick=”stopCount()”>停止</button>
→ 1秒ごとにカウントが増え、停止ボタンで止められます。
setIntervalとclearIntervalのポイント
setInterval()は指定時間ごとに繰り返し実行- 停止しない限り永続的に動作する
clearInterval()でタイマーを解除可能- タイマーIDを変数に保存しておく必要がある