Невозможно отменить setInterval

Question

Я делаю викторину с Javascript с 10 вопросами для ответа через 60 секунд. Он отлично работает, если участник пытается задать вопрос в течение 50-60 секунд, но если он сделает это за более короткое время и перезапустит викторину, таймер будет работать с удвоенной скоростью. Возможно, более ранний таймер не очищается. Вот сценарий:

$(window).ready(function() { 
    $('#fblock').hide(); 
    $('#sblock').show(); 
    $('#qblock').hide(); 
    $('.startquiz').click(function() { 
     qsi = 0; 
     score = 0; 
     showq(0); 
     $('#fblock').hide(); 
     $('#sblock').hide(); 
     $('#qblock').show(); 

     var secs = 0; 
     var id = setInterval(function() { 
      secs++; 
      console.log(secs); 
      document.getElementById("timer").innerHTML++; 
      if (secs > 60) { 
       clearInterval(id); 
       $('#result').html(score); 

       $('#qblock').hide(); 
       $('#fblock').show(); 
      } 
     }, 1000); 
    }); 
    $('.restartquiz').click(function() { 
     $('#fblock').hide(); 
     $('#sblock').show(); 
     $('#qblock').hide(); 
     document.getElementById("timer").innerHTML = 0; 
    }); 
}); 

Answer 1

Для меня это выглядит как единственный раз, когда интервал получает отмененный будет, когда «таймер» (secs) фактически exeeds числа 60. Удвоенная скорость можно объяснить secs++ который (после перезапуска викторины) выполняется два раза (один раз за начальный интервал).

Попробуйте отменить интервал в функции, которая будет выполняться при нажатии кнопки .restartquiz -Button.

Это может выглядеть как-то вроде этого (непроверенные):

var interval = null; 
$(window).ready(function() { 
    $('#fblock').hide(); 
    $('#sblock').show(); 
    $('#qblock').hide(); 
    $('.startquiz').click(function() { 
     qsi = 0; 
     score = 0; 
     showq(0); 
     $('#fblock').hide(); 
     $('#sblock').hide(); 
     $('#qblock').show(); 
     var secs = 0; 
     interval = setInterval(function() { 
      secs++; 
      console.log(secs); 
      document.getElementById("timer").innerHTML++; 
      if (secs > 60) { 
       clearInterval(interval); 
       $('#result').html(score); 

       $('#qblock').hide(); 
       $('#fblock').show(); 
      } 
     }, 1000); 
    }); 
    $('.restartquiz').click(function() { 
     $('#fblock').hide(); 
     $('#sblock').show(); 
     $('#qblock').hide(); 
     clearInterval(interval); 
     document.getElementById("timer").innerHTML = 0; 
    }); 
});