【JavaScript入門】setIntervalとclearIntervalの使い方｜一定間隔で処理を繰り返すタイマーの基本

JavaScriptの setInterval() は、指定した時間ごとに繰り返し処理を実行するためのメソッドです。
また、clearInterval() を使うことで、設定したタイマーを停止できます。

時間はミリ秒（1秒＝1000ミリ秒）で指定し、停止しない限り永続的に処理が続きます。

setInterval とは？

setInterval() は、指定した間隔で関数を繰り返し実行するメソッドです。
繰り返し処理を行いたいときに便利で、アニメーションや定期チェックなどに使われます。

基本構文

timerId = setInterval(実行する関数, 指定時間ミリ秒);

使用例：0.5秒ごとに関数を実行

timer2 = setInterval(() => {
    msg();
}, 500);

→ 0.5秒（500ミリ秒）ごとに msg() が繰り返し実行されます。

clearInterval とは？

clearInterval() は、setInterval() で設定したタイマーを停止するメソッドです。
停止するには、setInterval の戻り値であるタイマーIDを保存しておく必要があります。

使用例：設定したタイマーを解除

clearInterval(timer2);

→ timer2 に設定された繰り返し処理が停止します。

実例：カウントアップタイマー

let count = 0;
let timer;

function startCount() {
    timer = setInterval(() => {
        count++;
        document.getElementById('num').textContent = count;
    }, 1000);
}

function stopCount() {
    clearInterval(timer);
}

HTML側

<div>カウント：<span id="num">0</span></div>
<button onclick="startCount()">開始</button>
<button onclick="stopCount()">停止</button>

→ 1秒ごとにカウントが増え、停止ボタンで止められます。

setInterval を使うときのポイント

• setInterval は指定時間ごとに繰り返し実行される
• 停止しない限り永続的に動作する
• clearInterval でタイマーを解除できる
• タイマーIDを変数に保存しておく必要がある

まとめ

• setInterval は指定時間ごとに繰り返し処理を実行する
• clearInterval でタイマーを停止できる
• タイマーIDを保存しておくことが重要
• 繰り返し処理はアニメーションや定期チェックに便利