Как остановить таймер обратного отсчета?

Question

При клике на кнопку "Отправить заново" запускается таймер. Подскажите пожалуйста как остановить этот таймер когда он доходит до 0? А при клике опять на кнопку запускается? Спасибо

const buttonCode = document.querySelector('#code-reset');

function timer() {
    function startTimer(duration, display) {
        var timer = duration, minutes, seconds;
        setInterval(function () {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            display.textContent = minutes + ":" + seconds;

            if (--timer < 0) {
                timer = duration;
            }
        }, 1000);
   
    }

    let fiveMinutes = 60 * 0.1;
    let display = document.querySelector('#time');
    startTimer(fiveMinutes, display);

}

buttonCode.addEventListener("click", timer);

<div class="forms-setting-popup__buttons">
  <span id="time"></span>
  <div id="code-reset" class="forms-setting-popup__button">Отправить заново</div>
</div>

Answer 1

Я изменил название переменной timer на t, поскольку была еще одноименная функция. handle - указатель на таймер, используется для его остановки.

const buttonCode = document.querySelector('#code-reset');

function timer() {
  function startTimer(duration, display) {
    let t = duration,
      minutes, seconds;
    let handle = setInterval(function() {
      minutes = parseInt(t / 60, 10);
      seconds = parseInt(t % 60, 10);

      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      display.textContent = minutes + ":" + seconds;

      if (--t < 0) {
        t = duration;
        clearInterval(handle);
      }
    }, 1000);

  }
  
  let fiveMinutes = 60 * 0.1;
  let display = document.querySelector('#time');
  startTimer(fiveMinutes, display);

}

buttonCode.addEventListener("click", timer);

<div class="forms-setting-popup__buttons">
  <span id="time"></span>
  <div id="code-reset" class="forms-setting-popup__button">Отправить заново</div>
</div>

БЛОГ НА HUSL

Как остановить таймер обратного отсчета?

Ответы (1 шт):