0

При клике на кнопку "Отправить заново" запускается таймер. Подскажите пожалуйста как остановить этот таймер когда он доходит до 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>

1

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.