如何重新启动已设置间隔的倒数计时器？ Javascript

Question

http://jsfiddle.net/Xotic750/wwg8H/

function startTimer(m, s) {
    timer.textContent = m + ":" + s;
    if (s == 0) {
        if (m == 0) {
            return;
        } else if (m != 0) {
            m = m - 1;
            s = 60;
        }
    }
    
    s = s - 1;
    id = setTimeout(function () {
        startTimer(m, s)
    }, 1000);
}

Refer to the link above, when you click start for one time, it countdown from 5:00 in a normal way. However, when you press the start button two times, the countdown is not normal? May i know how to tackle this problem? Thank you. If possible, please provide a codepen demo. Thank you

Answer 1

Clear previous timer when someone click on start button again.

start.addEventListener("click", function () {
   clearTimeout(id);
    startTimer(5, 0);
}, false);

Checkout updated fiddle: http://jsfiddle.net/Lthvxeda/1/

Answer 2

在设置新的setInterval之前，您需要清除之前的setInterval ，请使用clearInterval(id) 。

Answer 3

You should clear the timer on click before executing the timer.

Additional notes:

I recommend using different conditions so it will be less nested and more readable.

Notice there is a bug in your program you should reset the seconds to 59, not 60 - because the second already has passed.

This is a quick example :

let timerId;

function renderCountDownTimer(minutes, seconds) {
  timer.textContent = minutes + ":" + seconds;
  if(seconds==0 && minutes==0) {
    return;
  }
  if(seconds == 0){
    minutes--;
    seconds = 59;
  } else {
    seconds--;
  }
  timerId = setTimeout(() => {
    renderCountDownTimer(minutes,seconds)
  },1000)
}

start.addEventListener("click", function () {
    clearTimeout(timerId)
    renderCountDownTimer(5, 0);
}, false);

Added the fiddle : https://jsfiddle.net/fqdhaxz7/1/