Chrome 擴展：Javascript 未運行 clearInterval()；

Question

我正在嘗試在 javascript 中制作一個 chrome 擴展。 到目前為止，我的 popup.js 看起來像這樣：

let bg;
let clock;

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('button1').addEventListener('click', butClicked);
    bg = chrome.extension.getBackgroundPage();
    //clock = document.getElementById("label1");
});


let timeStamp;
let isClockRunning = false;

function butClicked() {
    let test = bg.getURL();
    document.getElementById('test').innerHTML = test;

    timeStamp = new Date();
    isClockRunning = !isClockRunning;
    runCheckTimer();
}

function runCheckTimer() {
    var handle;
    if(isClockRunning == true) {
        handle = setInterval(updateClock, 1000);
    }
    else if(isClockRunning == false) {
        clearInterval(handle);
        handle = 0;
    }
}

function updateClock() {
    let seconds = bg.returnTimeSince(timeStamp);
    document.getElementById("label1").innerHTML = "Seconds: " + seconds;
}

當我單擊一次按鈕時，程序運行良好； 它啟動計時器。 但是當我第二次單擊按鈕時，timeStamp 設置為 0，但 updateClock 繼續以相同的間隔運行； 即使我正在切換 isClockRunning 布爾值，間隔也不會被清除。 這幾乎就像 javascript 忘記在 runCheckTimer() 中運行 else if 部分一樣。 我怎樣才能解決這個問題？

編輯：在旁注中，我是否以正確的方式做計時器的事情？ 或者有沒有更好的方法來做到這一點？ 我基本上想要一個計時器，自從您按下按鈕后，每秒都在滴答作響，然后當您再次單擊它時，它將停止並重置為 0。

Answer 1

您已將handle限定為runCheckTimer 。 當runCheckTimer啟動時，它每次都會創建一個新的handle 。

在函數外移動handle 。

var handle;
function runCheckTimer() {
    if(isClockRunning == true) {
        handle = setInterval(updateClock, 1000);
    }
    else if(isClockRunning == false) {
        clearInterval(handle);
        handle = 0;
    }
}