таймер ускоряется во втором раунде.

Question

Я заимствовал код JS, чтобы помочь мне создать таймер на 65 секунд. Мои знания JS являются базовыми, но мне удалось изменить сценарий, чтобы работать так, как я этого хочу. Однако, когда я нажимаю кнопку play, таймер ускоряется со второго раунда.

HTML:

<div id="rightCol"> 
     <span id="countdown" class="timer">Timer About to Start! </span> 
     <div> 
      <input type="button" value="Play" id="play"> 
     </div> 
    </div> 

JS:

var seconds = 65; 

function secondPassed() { 
    var minutes = Math.round((seconds - 30)/60); 
    var remainingSeconds = seconds % 60; 
    if (remainingSeconds < 10) { 
        remainingSeconds = "0" + remainingSeconds;  
    } 
    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; 
    if (seconds == 0) { 
        clearInterval(countdownTimer); 
        document.getElementById('countdown').innerHTML = "Time's Up!"; 
      document.getElementById("passage_text").disabled = true; 

    } else { 
        seconds--; 
    } 
} 
  
var countdownTimer = setInterval('secondPassed()', 1000); 

$("#play").click(function(){ 

    seconds = 65; 
    var countdownTimer = setInterval('secondPassed()', 1000); 

    $('#passage_text').attr('disabled', false).focus(); 
    $("#passage_text").val(''); 



}); 

Я читал некоторые другие ответы похожи на мои Count down timer speeds up, но я не совсем понимаю, как функция secondPassed() работает в почини это.

Answer 1

Вам также необходимо очистить интервал от play и сделать countdownTimer глобальным. Кроме того, это лучше передать обработчик функции к setInterval вместо строки, как это будет работать, как eval функции и не рекомендуется

var seconds = 65; 
var countdownTimer = null; // make it global 

function secondPassed() { 
    var minutes = Math.round((seconds - 30)/60); 
    var remainingSeconds = seconds % 60; 
    if (remainingSeconds < 10) { 
     remainingSeconds = "0" + remainingSeconds; 
    } 
    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; 
    if (seconds == 0) { 
     clearInterval(countdownTimer); 
     document.getElementById('countdown').innerHTML = "Time's Up!"; 
      document.getElementById("passage_text").disabled = true; 

    } else { 
     seconds--; 
    } 
} 

countdownTimer = setInterval(secondPassed, 1000); // removed var and passing handler instead of string. 

$("#play").click(function(){ 

    seconds = 65; 
    clearInterval(countdownTimer); // clear interval 
    countdownTimer = setInterval(secondPassed, 1000); // removed var to use global countdownTimer variable 

    $('#passage_text').attr('disabled', false).focus(); 
    $("#passage_text").val(''); 
}); 

Смотрите мои JS комментарии выше