setInterval und clearInterval durch Tastenklick Ereignisse

Question

Hier ist mein Code:

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); 
} 

Ich habe Probleme beim Versuch, setInterval und clearInterval einzurichten. 2 Tasten: start und stop. Ich möchte, dass die Funktion go ausgeführt wird, wenn ich auf start klicke, um den Timer zu starten. Das ist alles gut. Mein Problem ist, den Timer zu stoppen.

Wenn ich let x = setInterval(countDown, 1000); außerhalb der stopIt() Funktion gesetzt, wird es automatisch den Timer auf windows.onload unabhängig davon starten, ob ich Sie auf die Schaltfläche start aber, dabei habe ich den Timer stoppen.

Wenn ich let x = setInterval(countDown, 1000); in der stopIt() Funktion setzen, was ich hier habe, kann ich den Timer starten, wenn ich durch Klicken auf die Schaltfläche start will, aber jetzt kann ich nicht mit dem Timer clearInterval() stoppen.

Jede Hilfe wird sehr geschätzt. Danke im Voraus!

Answer 1

Versuchen Sie, die ID des Intervalls in der „go“ Funktion in einer Variablen gesetzt außerhalb in der „stopIt“ Funktion annulliert werden, wie folgt aus:

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); 
}