почему таймер не отключается предыдущий, когда включается новый? [дубликат]

214

19 апреля 2022, 23:50

На этот вопрос уже дан ответ здесь:

как отключать таймер setInterval ? Работают параллельно несколько (1 ответ)

Закрыт 1 год назад.

Таймер отключается только когда выходит время, а если нажать кнопку то запустится уже новый таймер, и предыдущий тоже будет работать

$(".next").click(function () {
  const secondsToAnswer = 10; // Количество секунд для ответа
  let timeLeft = secondsToAnswer;
  var startTimer = function(){
          const timer = setInterval(function(){
              if (timeLeft > 0) { // На последней секунде
                $('.timer').text(timeLeft + ' сек');
                timeLeft--;
              } else {
                $('.timer').text(0 + ' сек');
                clearInterval(timer);
                $('#next').click();
              }
            }, 1000);
            return timer;
      }
      
      //запуск таймера
      startTimer();
});

Answer 1

Потому что при каждом вызове у вас создаётся новая переменная timer, создаётся новая функция которая присваивается ей и с setInterval происходит совершенно аналогичная история.

Для большего понимания почитайте про замыкания

Для данной ситуации, решением может быть такое:

$(".next").click(function() {
    const secondsToAnswer = 10; // Количество секунд для ответа
    let timeLeft = secondsToAnswer;
    clearInterval(this.timer);
    this.timer = setInterval(function() {
        if (timeLeft > 0) { // На последней секунде
            $('.timer').text(timeLeft + ' сек');
            timeLeft--;
        } else {
            $('.timer').text(0 + ' сек');
            $('#next').click();
        }
    }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timer">0</div>
<button class="next">next</button>