多次使用setInterval和clearInterval的問題

Question

我對這裏發生的事情感到困惑。測驗第一次正常。然而，在第一場比賽之後，我遇到了各種各樣的問題。我想單擊相同的按鈕「＃start2」，開始並重新啓動測驗，即清除計時器，將所有變量恢復爲0等，並顯示第一個問題。就好像頁面已被刷新一般。

相反，我越來越快滴答作響，計時器正在增加正確的猜測等等。可怕。

我用modulo來衡量「＃start2」div被點擊的次數。在第一次點擊時，啓動計時器。第二次點擊 - 我想重置計時器。第三次點擊 - 啓動計時器，等等。

任何幫助是大規模讚賞。

var n = 0; 
var x = 0; 
var p = 0; 
var incTime; 

function a(n) { 
    var x,y,z; 

    x = Math.floor((Math.random() * 3)) 
    if(x == 0){y = 1; z = 2}else if(x == 1){y = 0; z = 2}else{y = 0; z = 1} 

    $("#question_holder2").text(questions[n].q); 

    $(".answer_holder2").eq(x).text(questions[n].a).data('answer', 'a'); 
    $(".answer_holder2").eq(y).text(questions[n].b).data('answer', 'b'); 
    $(".answer_holder2").eq(z).text(questions[n].c).data('answer', 'c'); 
} 

$(document).ready(function() { 

//timing element 
function startTimer(x){ 
    $("#start2").text(x); 
} 

$("#start2").click(function(){ 
    var setTimer; 
    p++; 
    //if it's been clicked before 
    if(p%2 === 0){ 
     clearInterval(setTimer); 
     $("#start2").text("Start"); 
     n = 0; 
     x = 0; 
     a(n); 
     alert("okay"); 
    }else if(p%2 !== 0){ 
     //never been clicked before 
     a(n); 
     setTimer = setInterval(function(){startTimer(x=x+1)}, 1000); 

     $('.answer_holder2').click(function() { 
      //correct answer given 
      if ($(this).data('answer') === 'a') { 
       n++; 
       if (n < questions.length) { 
        a(n); 
       } else { 
        alert("End of quiz!"); 
        clearInterval(setTimer); 
        $("#start2").text("You took " + x + " seconds, you  answered " + n + "   questions correctly, with - incorrect answers given."); 
        x = 0; 
        n = 0; 
        a(n); 
       } 
      }else{ 
       //incorrect answer given 
       $(this).fadeTo(1000,0.4); 
       var timeString = $("#start2").text(); 
       var incTime = (timeString * 1) + 5; 
       $("#start2").text(incTime); 
       startTimer(incTime); 
       x = incTime; 
      };  
     }); 
    }; 
}); 
}); 

Answer 1

你有這樣的：

$("#start2").click(function(){ 
    var setTimer; 
    p++; 
    //if it's been clicked before 
    if(p%2 === 0){ 
     clearInterval(setTimer); 
//.... 

在這種情況下，當你設置爲clearInterval線，setTimer將始終是0，而不是一個正在運行的定時器的ID。所以這實際上並沒有停止任何計時器。如果你不停止計時器，它將繼續運行。所以這裏的功能：

setTimer = setInterval(function(){startTimer(x=x+1)}, 1000); 

會繼續運行。所以下次你創建一個計時器，你現在有兩個計時器更新x，它會看起來更快。

試試這個：

$(document).ready(function() { 
    var setTimer; 
    $("#start2").click(function(){ 
     // the rest of your click handler code...  
    }); 

    //timing element 
    function startTimer(x){ 
     $("#start2").text(x); 
    } 
} 

你setTimer變量需要的範圍存在於您的單擊處理程序之外。正如你所做的那樣，你每次都聲明一個新變量，所以當你嘗試清除計時器時，實際上並沒有清除計時器。

另外：關於如何重新連接點擊處理程序的怪異點也是一個問題。你也需要解決這個問題。

Answer 2

答案是不好的事情發生，因爲這樣：

$("#start2").click(function(){ 
    // some code... 
    $('.answer_holder2').click(function() { 
     // some code... 
    }); 
}); 

當你點擊#start2新的處理程序連接到.answer_holder2。因此，在例如3次點擊之後，.answer_holder2有3個處理程序附加到它上面，當你點擊它時，所有3個點火。

你的代碼有點複雜，我不會給你一個解決方案如何解決這個問題。但我可以給你一個提示。將內部.click放置在外部.click之外。你可能不得不改變一些代碼，但那必須完成。

編輯你可以嘗試什麼（如快速修復，但不necessarly好）被添加此：

$('.answer_holder2').off("click").click(function() { 

Additonally看看馬特的答案。