Таймер, который можно сбросить без наложения? - Javascript

Question

Я полный нуб к JS, пытаюсь использовать его впервые для школьного проекта.

Моя цель - иметь таймер, который ведет обратный отсчет при нажатии кнопки. Затем вызывается функция countdownClock со значением Unix через 10 минут в качестве параметра. Мой код, кажется, работает прилично хорошо, но после повторного нажатия кнопки он создает странный чередующийся сбой, когда оба таймера работают одновременно.

Что я могу сделать, чтобы забыть о предыдущем таймере после нажатия кнопки? Спасибо!

function countdownClock(time){
  // Set the date we're counting down to
  var countDownDate = (time + "000");
  // Update the count down every 1 second
  var x = setInterval(function() {
    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("timer").innerHTML = minutes + "m " + seconds + "s ";
    // If the count down is over, write some text
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("timer").innerHTML = "GAME OVER";
    }
  }, 1000);
}

Answer 1

Я предполагаю, что вы скопировали это откуда-то, поскольку у него уже есть то, что вам нужно - clearInterval даст вам результат, который вы ищете, и вам нужны только минимальные изменения

var intervalId;
function countdownClock(time){
  // Set the date we're counting down to
  var countDownDate = (time + "000");
  // clear the old one, if relevant
  if (intervalId)
    clearInterval(intervalId)
  intervalId = setInterval(function() {
    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("timer").innerHTML = minutes + "m " + seconds + "s ";
    // If the count down is over, write some text
    if (distance < 0) {
      clearInterval(intervalId);
      document.getElementById("timer").innerHTML = "GAME OVER";
    }
  }, 1000);
}