一定時間ごとに動く setInterval JavaScript 使い方 と Vueのwatchとの違いについて

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

# setInterval の解説

`setInterval` は JavaScript のコードで使うことができるタイマー関数で、指定した間隔で関数を繰り返し実行します。

---

## 基本構文

```js
setInterval(myFunc, 1000); // 1秒ごとに myFunc を実行
```

---

## 例

```js
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負荷の影響を受けることがあります。


https://www.sejuku.net/blog/24425


# 関数の設置例(intervalTaskという関数をsetIntervalに入れている)
```Summary.vue
function intervalTask() {
  checkUploadStatus()
  if (counterStore.uploadStatus === 'completed' || counterStore.uploadStatus === 'error') {
    clearInterval(statusCheckInterval)
  }
}

const statusCheckInterval = setInterval(intervalTask, 1000)//タイマーのIDを受け取る
```

# なぜ返却値を受け取るのか？

`setInterval` の返却値を受け取る理由は、タイマーを後で制御（停止）するためです。

---

## 🌟 setInterval の返却値とは？

```js
const timerId = setInterval(() => {
  console.log('1秒ごとに実行');
}, 1000);
```

- この `timerId` はブラウザや Node.js のランタイムがタイマーを管理するための **識別子**（ブラウザでは数値ID、Node.js ではオブジェクト）。
- この識別子を使って後からタイマーを止めることができます。

---

## ✅ clearInterval のためです

例えば次のように使います：

```js
clearInterval(timerId);
```

➡ これにより、その `timerId` に紐づいたタイマーを停止できます。

---

## 💡 なぜ必要？

- 複数のタイマーが存在する場合、どのタイマーを止めるか特定するため。
- 一定条件（例：進捗100%）で自動的にタイマーを止めたい場合に必要。

---

## 🌱 実例

```js
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

補足: 両方組み合わせることで周期的なデータ更新とそれに対するリアクションも可能
```

---

## 例

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