0

ここで何が起こっているのか混乱しています。クイズは初めてうまくいきます。しかし、最初のプレイの後、あらゆる種類の問題が発生します。同じボタン「#start2」をクリックして、クイズを開始および再開します。つまり、タイマーをクリアし、すべての変数を 0 に戻して、最初の問題を表示します。基本的に、ページが更新されたかのように。

代わりに、刻みが速くなり、正しい推測でタイマーがインクリメントされます。最悪。

モジュロを使用して、「#start2」div がクリックされた回数を測定しました。最初のクリックで、タイマーを開始します。2回目のクリックで-タイマーをリセットしたい。3 回目のクリック - タイマーの開始など。

どんな助けでも大歓迎です。

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行に設定すると、実行中のタイマーの ID ではなく、常にsetTimer0 になります。したがって、これは実際にはタイマーを停止していません。タイマーを停止しないと、タイマーは引き続き実行されます。したがって、関数は次のとおりです。

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

走り続けます。次回タイマーを作成すると、2 つのタイマーが更新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_holder23 つのハンドラーがアタッチされ、クリックすると 3 つすべてが起動します。

あなたのコードは少し複雑なので、それを修正する方法を説明するつもりはありません。しかし、私はあなたにヒントを与えることができます。アウターのインナー.clickをアウターに.click。おそらくいくつかのコードを変更する必要がありますが、それは実行する必要があります。

EDITあなたが試すことができるのは（迅速な修正として、しかし必ずしも良いとは限りません）これを追加することです：

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

さらに、マットの答えを見てください。

于 2013-02-08T14:47:37.367 に答える