setIntervalをキャンセルできません

Question

私は60秒で答えられるように10の質問でJavascriptタイムクイズを作成しています。競技者が50〜60秒で質問を試みるとうまくいきますが、短い時間で試してクイズを再開すると、タイマーは2倍のスピードで動作します。以前のタイマーがクリアされていない可能性があります。ここでのスクリプトは次のとおりです。

$(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）は、実際に60 倍の速度の数は​​によって説明できるexeedsとき、あるように見えますそれは（クイズを再起動した後で）2回（開始間隔ごとに1回）実行されます。

.restartquizボタンを押したときに実行される関数の間隔をキャンセルしてみてください。

これが（未テスト）のようなもののようになります。

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; 
    }); 
});