设置 Interval() 和 ClearInterval() 逻辑支持

Question

无法在循环外停止计时器。我真的不知道为什么 setTimeout() 一直在帮助函数工作......而且我知道它在语法上不是最正确的..但想知道是否有人可以帮助我指出如何能够在外部调用它停止倒计时的函数，假设在计时器之前发生了一个动作，并且想要调用 stopCountdown() 函数？

function countdown(start){
    setTimeout(setCountdown, 1000);
    let startingMinutes = timerEl.innerHTML;
    startingMinutes = start;
    let time = startingMinutes * 60;
    function setCountdown(){
        const minutes = Math.floor(time/60);
        let seconds = time % 60;
         if(seconds < 10){
            seconds = '0' + seconds
         } else {
            seconds
            }
        if(minutes <=0 && seconds <=0){
           clearInterval(start);
            console.log('timerOver')
         } else{
        setTimeout(setCountdown, 1000);  
        timerEl.innerHTML = (minutes + ':'+seconds)
        time--;
        }
    }}

function stopCountdown(){
    document.querySelector("#countdown").innerText = '0'
    setTimeout(setCountdown(start));
}

Answer 1

欢迎来到编码，我正在尽力解释它。首先，让我指出我对您的代码的一些看法

function countdown(start){
    setTimeout(setCountdown, 1000);
    let startingMinutes = timerEl.innerHTML;
    startingMinutes = start;
    // I am not sure why you firstly initializing startMinutes
   // to the value of timerEl.innerHTML 
  //and then reassign the value of startMinutes to variable start next line 
    let time = startingMinutes * 60;
    function setCountdown(){
        const minutes = Math.floor(time/60);
        let seconds = time % 60;
         if(seconds < 10){
            seconds = '0' + seconds
         } else {
            seconds
            }
        if(minutes <=0 && seconds <=0){
           clearInterval(start); // you are using setTimeout, not setInterval
            console.log('timerOver')
         } else{
        setTimeout(setCountdown, 1000);  
        timerEl.innerHTML = (minutes + ':'+seconds)
        time--;
        }
    }}

function stopCountdown(){
    document.querySelector("#countdown").innerText = '0'
    setTimeout(setCountdown(start)); 
    // when calling stopCountdown(), what is the value of start? 
    // you can't access function setCountdown inside function stopCountdown

}

如果我猜对了，你想做一个定时器，然后调用stopCountdown函数让它停止，对吧？对于计时器，它只是要求 javascript - 每 1000 毫秒过去 1 秒。所以我们可以写一个 -1 秒的函数，让 JS 每 1000 毫秒运行它，对吧？

在这种情况下，你应该使用setInterval而不是setTimeout（setTimeout也可以做一个定时器，我也会告诉你）。不同之处在于 setTimeout 在 X 毫秒后调用一次函数，而 setInterval 将运行每 X 毫秒调用一个函数。

这是代码

let countdownIntervalId // get the countdownIntervalId outside by first declearing a variable to catch the id

function countdown(start) {     // assume the unit of start is minute
    console.log("countdown called, minutes =" + start)
    // add code here to change the innerHTML of the timer if you want
    let secondsToCount = start * 60; //Converting minutes to seconds

    countdownIntervalId = setInterval(() => {
        timer()
    }, 1000); // starting to count down 


    function timer() { // run every seconds
        const minutes = Math.floor(secondsToCount / 60);
        let seconds = secondsToCount - minutes*60;
        console.log("counter= " + minutes + ':' + `${seconds}`.padStart(2, '0'))
        secondsToCount = secondsToCount-1;
        if (minutes <= 0 && seconds <= 0) {
            clearInterval(countdownIntervalId); // clearInterval
            console.log('timerOver')
        } 
    }
}

function stopCountdownOutside(){
    if(countdownIntervalId){
        clearInterval(countdownIntervalId)
    }
}

countdown(2) //countdown 2 mins

您可以通过调用 stopCountdownOutside() 停止计数器，您可以在 Chrome 控制台上进行测试。这是因为我们将 intervalId 传递给在函数外部声明的 countdownIntervalId。所以我们可以简单地调用 clearInterval(countdownIntervalId) 来停止它

使用setTimeout

let countdownTimeoutId// get the countdownIntervalId outside by first declearing a variable to catch the id

function countdown(start) {     // assume the unit of start is minute
    console.log("countdown called, minutes =" + start)
    // add code here to change the innerHTML of the timer if you want
    let secondsToCount = start * 60; //Converting minutes to seconds

    countdownTimeoutId = setTimeout(() => {
        timer()
    }, 1000); // starting to count down 


    function timer() { // run every seconds
        const minutes = Math.floor(secondsToCount / 60);
        let seconds = secondsToCount - minutes*60;
        console.log("counter= " + minutes + ':' + `${seconds}`.padStart(2, '0'))
        secondsToCount = secondsToCount-1;
        if (minutes <= 0 && seconds <= 0) {
            clearTimeout(countdownTimeoutId); // clearTimeout
            console.log('timerOver')
        }else{
            countdownTimeoutId = setTimeout(timer,1000)
        }
    }
}

function stopCountdownOutside(){
    if(countdownTimeoutId){
        clearTimeout(countdownTimeoutId)
    }
}

countdown(1) //countdown 2 mins

您可以尝试将我的代码重构为更干净的版本，祝您编码愉快

设置 Interval() 和 ClearInterval() 逻辑支持

Set Interval() and ClearInterval() logic support

html

javascript

function

setinterval

clearinterval