2024-11-23 vue 之 if (this.timer) return; 如果沒有這個判斷會怎樣?

發表於 分類於 閱讀次數：
2024-11-23 vue 之 if (this.timer) return; 如果沒有這個判斷會怎樣?

2024-11-23 vue 之 if (this.timer) return; 如果沒有這個判斷會怎樣?

這句話的目的是防止計時器重複啟動。如果沒有這個判斷，可能會導致多個計時器同時運行，導致時間計算出錯。

程式碼中的邏輯

1
if (this.timer) return; // 防止重複啟動
  • **this.timer**：是一個計時器 ID，用來追蹤計時器是否已經啟動。如果 this.timer 不為 null，代表計時器正在運行。
  • **return**：中止執行後續程式碼，防止重複啟動。

沒有這段代碼的情況

假設有以下程式碼：

1
2
3
4
5
startTimer() {
  this.timer = setInterval(() => {
    this.time += 10; // 每 10 毫秒增加 10
  }, 10);
}

如果按下多次「啟動」按鈕，會發生什麼？

  1. 每按一次「啟動」，都會新建一個計時器（setInterval）。
  2. 這些計時器會同時運行，導致時間以更快的速度累加。

實際範例

假設我們連續按了 3 次「啟動」：

  • 第一次按下：時間每 10 毫秒增加 10。
  • 第二次按下：時間每 10 毫秒增加 20（兩個計時器在運行）。
  • 第三次按下：時間每 10 毫秒增加 30（三個計時器在運行）。

假設過了 1 秒鐘：

  • 正確情況（只有一個計時器）：time = 1000（1 秒 = 1000 毫秒）。
  • 沒有防重啟的情況（三個計時器同時運行）：
    • 第 1 個計時器：time = 1000
    • 第 2 個計時器：time = 1000
    • 第 3 個計時器：time = 1000
    • 總計：time = 3000

有防重啟的效果

加入 if (this.timer) return 後：

  1. 當第一次按下「啟動」時：
    • this.timer 為 null，計時器啟動。
  2. 當第二次按下「啟動」時：
    • this.timer 已有值，表示計時器正在運行，程式碼會直接 return，不再啟動新的計時器。

正確情況

  • 無論按下多少次「啟動」，都只有一個計時器運行。

完整範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
startTimer() {
  if (this.timer) return; // 防止重複啟動
  this.timer = setInterval(() => {
    this.time += 10;
    console.log(this.time); // 顯示時間
  }, 10);
}

stopTimer() {
  clearInterval(this.timer);
  this.timer = null; // 重置計時器狀態
}

resetTimer() {
  this.time = 0;
  clearInterval(this.timer);
  this.timer = null;
}

測試結果

按「啟動」後每秒輸出的值：

  • 沒有防重啟：

    1
    2
    3
    10, 20, 30, 40... (第一個計時器)
    20, 40, 60, 80... (第二個計時器)
    30, 60, 90, 120... (第三個計時器)

  • 有防重啟：

    1
    10, 20, 30, 40, 50... （正確情況）

總結

  • if (this.timer) return 是為了防止多次啟動計時器，保證程式邏輯的正確性。
  • 沒有這句判斷會導致多個計時器同時運行，時間累加錯誤。