的setInterval和clearInterval通過按鈕單擊事件

Question

這裏是我的代碼：

window.onload = runThis; 
function runThis() { 

    const txtMin = document.getElementsByClassName("min"); 
    const txtSec = document.getElementsByClassName("sec"); 

    function go() { 
    setInterval(countDown, 1000); 
    } 

    function countDown() { 
    timeNow = timeNow - 1; 
    timeSec = timeNow % 60; //remainder as seconds 
    timeMin = Math.round((timeNow/60) - (timeSec/60)); //minutes 

    txtMin[0].innerText = 
     (timeMin > 0 ? 
     (timeMin >= 10 ? `${timeMin}:` : `0${timeMin}:`) 
     : "00:"); 

    txtSec[0].innerText = 
     (timeSec > 0 ? 
     (timeSec >= 10 ? timeSec : `0${timeSec}`) 
     : "00"); 
    } 

    function stopIt() { 
    let x = setInterval(countDown, 1000); 
    clearInterval(x); 
    } 

    const btnStart = document.getElementsByClassName("start"); 
    btnStart[0].addEventListener("click", go); 

    const btnStop = document.getElementsByClassName("stop"); 
    btnStop[0].addEventListener("click", stopIt); 
} 

我有麻煩試圖建立的setInterval和clearInterval。 2個按鈕：start和stop。當我點擊start來啓動計時器時，我想讓功能go運行。這很好。我的問題是試圖停止計時器。

如果我把let x = setInterval(countDown, 1000);的stopIt()功能之外，它會自動啓動定時器上windows.onload不管我是否點擊start按鈕，但在這樣做，我可以停止計時器。

如果我把let x = setInterval(countDown, 1000);喜歡什麼我這裏有stopIt()功能裏面，我就可以開始，每當我想通過點擊按鈕start計時器，但現在我可以用clearInterval()沒有停止計時。

任何幫助，非常感謝。提前致謝！

Answer 1

嘗試設置時間間隔的ID在外部變量「走出去」功能的「stopIt」函數內被取消，像這樣：

window.onload = runThis; 
function runThis() { 
    var intervalID = null; 
    const txtMin = document.getElementsByClassName("min"); 
    const txtSec = document.getElementsByClassName("sec"); 

    function go() { 
    intervalID = setInterval(countDown, 1000); 
    } 

    function countDown() { 
    timeNow = timeNow - 1; 
    timeSec = timeNow % 60; //remainder as seconds 
    timeMin = Math.round((timeNow/60) - (timeSec/60)); //minutes 

    txtMin[0].innerText = 
     (timeMin > 0 ? 
     (timeMin >= 10 ? `${timeMin}:` : `0${timeMin}:`) 
     : "00:"); 

    txtSec[0].innerText = 
     (timeSec > 0 ? 
     (timeSec >= 10 ? timeSec : `0${timeSec}`) 
     : "00"); 
    } 

    function stopIt() { 
    clearInterval(intervalID); 
    } 

    const btnStart = document.getElementsByClassName("start"); 
    btnStart[0].addEventListener("click", go); 

    const btnStop = document.getElementsByClassName("stop"); 
    btnStop[0].addEventListener("click", stopIt); 
}