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变量需要存在于Click处理程序之外的范围内。正如你所拥有的那样，你每次都会声明一个新变量，所以当你尝试清除定时器时，你实际上并没有清除定时器。

另外：关于如何重新连接点击处理程序的怪异点也是一个问题。你也需要解决这个问题。

Answer 2

答案是因为这件事而发生了不好的事情：

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

点击#start2 新处理程序附加到.answer_holder2。因此，在例如3次点击后，.answer_holder2附加了3个处理程序，当您点击它时全部3次点击。

你的代码有点复杂，我不打算给你解决方法如何修复它。但我可以给你一个提示。将内部.click放在外部.click之外。您可能需要更改一些代码，但必须这样做。

编辑你可以尝试（作为一个快速解决方案，但不是必要的好）是添加这个：

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

另外看看马特的回答。

多次使用setInterval和clearInterval的问题

2 个答案: