指定した秒ごとに指定した関数が実行される
setInterval の解説
setInterval は JavaScript のコードで使うことができるタイマー関数で、指定した間隔で関数を繰り返し実行します。
基本構文
setInterval(myFunc, 1000); // 1秒ごとに myFunc を実行
例
function myFunc() {
console.log(new Date().toLocaleTimeString());
}
const timerId = setInterval(myFunc, 1000);
// 5秒後に止める
setTimeout(() => {
clearInterval(timerId);
console.log('タイマーを止めました');
}, 5000);
JavaScript と Web API の関係図
JavaScript のコード
↓ 呼び出し
ブラウザの Web API (setInterval)
↓ タイマーの登録
イベントループ
↓ タイマーが満了したらキューにコールバックを入れる
JavaScript 実行コンテキストでコールバック実行
setInterval の仕組みとイベントループの図解
1. setInterval を呼び出す
↓
2. ブラウザ(Web API) がタイマーを開始
↓ (指定間隔後)
3. タイマーが満了するとイベントキューにコールバックを登録
↓
4. イベントループが実行中の処理が終わるとキューからコールバックを取り出し実行
↓
5. 次の間隔まで待ち、繰り返し
補足
-
setIntervalは JavaScript の標準仕様(ECMAScript)の一部ではなく、ブラウザや Node.js のランタイムが提供する機能です。 - 繰り返し実行を止めるには
clearIntervalを使います。 - タイマーの精度はブラウザやCPU負荷の影響を受けることがあります。
関数の設置例(intervalTaskという関数をsetIntervalに入れている)
Summary.vue
function intervalTask() {
checkUploadStatus()
if (counterStore.uploadStatus === 'completed' || counterStore.uploadStatus === 'error') {
clearInterval(statusCheckInterval)
}
}
const statusCheckInterval = setInterval(intervalTask, 1000)//タイマーのIDを受け取る
なぜ返却値を受け取るのか？
setInterval の返却値を受け取る理由は、タイマーを後で制御（停止）するためです。
🌟 setInterval の返却値とは？
const timerId = setInterval(() => {
console.log('1秒ごとに実行');
}, 1000);
- この
timerIdはブラウザや Node.js のランタイムがタイマーを管理するための 識別子（ブラウザでは数値ID、Node.js ではオブジェクト）。 - この識別子を使って後からタイマーを止めることができます。
✅ clearInterval のためです
例えば次のように使います：
clearInterval(timerId);
➡ これにより、その timerId に紐づいたタイマーを停止できます。
💡 なぜ必要？
- 複数のタイマーが存在する場合、どのタイマーを止めるか特定するため。
- 一定条件（例：進捗100%）で自動的にタイマーを止めたい場合に必要。
🌱 実例
const timerId = setInterval(() => {
console.log('毎秒実行');
}, 1000);
// 5秒後にタイマーを止める
setTimeout(() => {
clearInterval(timerId);
console.log('タイマーを停止しました');
}, 5000);
補足
- ブラウザ:
setIntervalの返り値は数値の ID。 - Node.js:
setIntervalの返り値はTimeoutオブジェクト。
無名関数で setInterval内に宣言する書き方
Summary.vue
// アップロード状態を定期的にチェック
const statusCheckInterval = setInterval(() => {
checkUploadStatus()
// アップロードが完了したら監視を停止
if (counterStore.uploadStatus === 'completed' || counterStore.uploadStatus === 'error') {
clearInterval(statusCheckInterval)
}
}, 1000)
✅ setInterval と watch の比較表
| 比較軸 | setInterval | watch (Vue) |
|---|---|---|
| トリガー | 指定時間の経過 | リアクティブデータの変化 |
| 提供元 | JavaScript (Web API / Node API) | Vue のリアクティブシステム |
| 用途 | 定期実行、周期処理 | データ監視、状態変化の反応 |
| 停止方法 | clearInterval | unwatch または戻り値の停止関数 |
| 実行タイミング | 一定時間ごと | データが変わった瞬間 |
✅ setInterval と Vue の watch の使い分けフローチャート
やりたいことは？
↓
周期的に一定間隔で処理をしたい → setInterval
データの変化に応じて処理をしたい → watch
補足: 両方組み合わせることで周期的なデータ更新とそれに対するリアクションも可能
例
// setInterval の例
setInterval(() => {
console.log('1秒ごとに出力')
}, 1000)
// watch の例
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log(`count が ${oldVal} から ${newVal} に変わった`)
})