javascript - 多次使用 setInterval 和clearInterval 时出现问题

Question

我对这里发生的事情感到困惑。第一次测验效果很好。然而，在第一次玩之后，我遇到了各种各样的问题。我想单击同一个按钮“#start2”来开始并重新启动测验，即清除计时器，将所有变量放回 0 等，然后显示第一个问题。基本上就好像页面被刷新了一样。

相反，我的滴答声越来越快，计时器根据正确的猜测而增加，等等。太可怕了。

我使用模数来测量“#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 变量需要存在于点击处理程序之外的范围内。正如您所拥有的那样，您每次都声明一个新变量，因此当您尝试清除计时器时，您实际上并没有清除计时器。

另外:关于如何重新附加点击处理程序的怪异观点也是一个问题。您也需要解决这个问题。