0

我对这里发生的事情感到困惑。测验第一次运行良好。然而，在第一次玩之后，我遇到了各种各样的问题。我想单击同一个按钮，“#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;
            };      
        });
    };
});
});
4

2 回答 2

2

你有这个：

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

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

于 2013-02-08T14:46:55.100 回答
1

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

$("#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() {

另外看看马特的答案。

于 2013-02-08T14:47:37.367 回答