Остановка таймера из цикла

#javascript #html #timer

#javascript #HTML #таймер

Вопрос:

Как вы можете остановить цикл таймера вот пример кода:

 <html>

  <body>
    <div><span id="time">05:00</span> minutes!
      <button onclick="start5Timer()">start</button>
      <button onclick="resetTimer()">reset</button>
    </div>
  </body>

  <script>
    let timerId;
    function startTimer(duration, display) {
      var timer = duration,
        minutes, seconds;
      timerId = 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);
    }
    
     function resetTimer() {
          clearInterval(timerId);
          start5Timer();
        }

    function start5Timer() {
      var fiveMinutes = 60 * 5,
      display = document.querySelector('#time');
       startTimer(fiveMinutes, display);
    };

  </script>

</html>
  

Вот ссылка на код: https://www.w3schools.com/code/tryit.asp?filename=GJQWAX7ZQK8B
это не скрипка js, это редактор tryit для школ W3

Комментарии:

1. ваша версия tryit editor работает нормально.

2. может быть, вы можете посмотреть эту ссылку, чтобы лучше понять, что ссылка , по сути, использует setInterval() для запуска и clearInterval() для остановки.

Ответ №1:

 function stopTimer() {
  clearInterval(timerId);
}
  

start5Timer(); внутри resetTimer() перезапуск вашего таймера.