指定した秒ごとに指定した関数が実行される

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} に変わった`)
})