JavaScriptのカウントダウンタイマー、インターバルがクリックイベント後にスピードアップ

Question

カウントダウンタイマーを作成し始めました。これまでのところ、ほとんどの場合、私が望むように働いています。ボタンはタイマーを開始または一時停止します。しかし、開始して複数回中断した場合、間隔はもはや1000msに設定されません。これにより、ボタンクリックごとに複数のインターバルが並行して実行されているように思えます。私はこれをいかに正確に修正するか、または正確にどこに問題があるのか​​はわかりません。ラインで

function startCountDown() { 
    running = !running; 
    running ? startButton.value = "Stop Countdown" : startButton.value = "Start Countdown"; 

    let t = timeDisplay.innerHTML.replace(/:/g, ''); 
    let seconds = t.slice(-2) 
    let minutes = t.slice(-4, -2); 
    let hours = t.slice(-6, -4); 

    seconds > 60 ? seconds = 59 : seconds; 
    minutes > 60 ? minutes = 59 : minutes; 

    secondsRemaining = (hours * 3600) + (minutes * 60) + (seconds * 1) 

    intervalHandle = setInterval(tick, 1000) 
    if (running === false) { 
    clearInterval(intervalHandle) 
    } 
} 

function tick() { 
    if (running) { 
    secondsRemaining--; 
    console.log(secondsRemaining) 
    hour = Math.floor(secondsRemaining/3600) 
    min = Math.floor((secondsRemaining - (hour * 3600))/60); 
    sec = Math.floor((secondsRemaining - (hour * 3600) - (min * 60))); 

    timeDisplay.innerHTML = `${hour}:${min}:${sec}` 
    if (secondsRemaining === 0 || running === false) { 
     clearInterval(intervalHandle) 
    } 
    } 
} 

Answer 1

intervalHandle = setInterval(tick, 1000) 
if (running === false) { 
    clearInterval(intervalHandle) 
} 

新しいタイマー毎回startCountDownが呼び出され始めます。新しいタイマーのIDがintervalHandleに保存されているため、以前に実行中のタイマーがあった場合は、IDが失われます。その後、runningフラグがfalseの場合、新しく作成したタイマーを停止するだけで、前のタイマーは永久に実行され続けます。

つまり、startCountDownを呼び出すたびにタイマーがリークします。

あなたは完璧な理にかなっている

if (running === false) { 
    clearInterval(intervalHandle); 
} else { 
    intervalHandle = setInterval(tick, 1000); 
}