為什么我的區間調用我的 function 即使它在一個變量中？

Question

我有一個秒表，上面有開始、停止和重置時間的按鈕。 每次單擊停止按鈕時，我都為變量分配了一個間隔以使用 clearInterval 暫停它，但是即使我沒有單擊任何按鈕，我的間隔仍在調用 function。 我該如何解決？

 const startButton = document.getElementById('start'); const stopButton = document.getElementById('stop'); const resetButton = document.getElementById('reset'); const myInterval = setInterval(setTime, 10); startButton.addEventListener('click', () => { setInterval(setTime, 10); }) stopButton.addEventListener('click', ()=> { clearInterval(myInterval); }) const timeUnits = ['00', '00', '00', '00']; milliSeconds = 0; seconds = 0; minutes = 0; hours = 0; function setTime() { if (minutes == 60) { hours++; minutes = 0; timeUnits[0] = hours; timeUnits[1] = 0; } else if (seconds == 60) { minutes++; seconds = 0; timeUnits[1] = minutes; timeUnits[3] = 0; } else if (milliSeconds == 100) { seconds++; milliSeconds = 0; timeUnits[2] = seconds timeUnits[3] = 0; document.getElementById('para').innerHTML = timeUnits.join(':'); } else { milliSeconds++; timeUnits[3] = milliSeconds; document.getElementById('para').innerHTML = timeUnits.join(':'); }; }

 <p id="para">00:00:00:00</p> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button>

Answer 1

您在兩個地方設置了間隔：

const myInterval = setInterval(setTime, 10);     // <-- Here (A)
startButton.addEventListener('click', () => {
  setInterval(setTime, 10);                      // <-- and here (B)
})

在點 A（頁面加載時自動啟動）中，您將間隔 ID 保存到myInterval中，以便以后可以執行clearInterval(myInterval) 。

但是，在點 B（單擊“開始”按鈕時按需開始），您不這樣做，因此通過單擊“開始”按鈕設置的間隔永遠不會被清除。

這可以通過在兩個地方將時間間隔保存到myInterval中來解決：

let myInterval = setInterval(setTime, 10)
startButton.addEventListener('click', () => {
  myInterval = setInterval(setTime, 10)
})

現在，這創建了一些重復的代碼，這並不理想，並且仍然存在僅單擊“開始”多次會創建多個並行運行的間隔的問題，用新的間隔ID覆蓋之前的間隔ID，使舊的間隔再次無法清除。

我對解決這兩個問題的建議是創建函數startInterval和stopInterval ，其中startInterval還會在設置新間隔之前首先調用stopInterval ，如果存在則stopInterval清除舊間隔。 然后您可以在頁面加載和“開始”按鈕單擊時stopInterval startInterval ，在“停止”按鈕單擊時調用 stopInterval：

let myInterval = null

function startInterval () {
  stopInterval()
  myInterval = setInterval(setTime, 10)
}

function stopInterval () {
  if (!myInterval) return
  clearInterval(myInterval)
  myInterval = null
}

startInterval()

startButton.addEventListener('click', startInterval)
stopButton.addEventListener('click', stopInterval)

從問題的措辭來看，我不確定您是否真的想自動啟動計時器。 如果您不這樣做，您可以簡單地從我的示例中刪除startInterval()行（或者在原始代碼的情況下，將第一個分配更改為let myInterval = null ，就像在第二個示例中一樣）。

Answer 2

您的間隔自動開始的原因是因為您在分配變量開始時調用了setInterval function。 為了防止這種情況，只需定義變量let myInterval = null; 這樣您就可以獲得變量，但在按下開始按鈕之前它不會自動開始間隔。

按下“開始”后按下“停止”按鈕時它沒有停止的原因是因為在您的startButton單擊處理程序中，您沒有將間隔重新分配給變量。 所以這是一個你無法清除的間隔，因為你沒有將它分配給任何東西。 簡單的解決方法是說myInterval = setInterval(setTime, 10) 。 由於您要重新分配myInterval ，因此您還需要使用let而不是const來定義它。

 const startButton = document.getElementById('start'); const stopButton = document.getElementById('stop'); const resetButton = document.getElementById('reset'); let myInterval = null; startButton.addEventListener('click', () => { myInterval = setInterval(setTime, 10); }) stopButton.addEventListener('click', ()=> { clearInterval(myInterval); }) const timeUnits = ['00', '00', '00', '00']; milliSeconds = 0; seconds = 0; minutes = 0; hours = 0; function setTime() { if (minutes == 60) { hours++; minutes = 0; timeUnits[0] = hours; timeUnits[1] = 0; } else if (seconds == 60) { minutes++; seconds = 0; timeUnits[1] = minutes; timeUnits[3] = 0; } else if (milliSeconds == 100) { seconds++; milliSeconds = 0; timeUnits[2] = seconds timeUnits[3] = 0; document.getElementById('para').innerHTML = timeUnits.join(':'); } else { milliSeconds++; timeUnits[3] = milliSeconds; document.getElementById('para').innerHTML = timeUnits.join(':'); }; }

 <p id="para">00:00:00:00</p> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button>

Answer 3

這一行：

const myInterval = setInterval(setTime, 10);

實際上開始了間隔。

您需要將其更改為：

let myInterval;
startButton.addEventListener('click', () => {
  myInterval = setInterval(setTime, 10);
})

這樣可以確保每次按下start按鈕時，間隔將再次分配給myInterval變量，然后可以通過停止按鈕將其清除