Problems using setInterval and clearInterval more than once

Question

I'm getting confused with what's happening here. The quiz works fine the first time. After the first play, though, I get all sorts of problems. I want to click the same button,"#start2", to start and also restart the quiz, ie clear the timer, put all variables back to 0 etc, and display the first question. As if the page had been refreshed, basically.

Instead, I'm getting faster ticking, the timer is incrementing on correct guess and so on. Horrible.

I've used modulo to measure how many times the "#start2" div is clicked. On first click, start timer. On second click - I want to reset the timer. Third click - start timer, and so on.

Any help is massively appreciated.

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

You have this:

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

In this case, when you set to the clearInterval line, setTimer will always be 0, and not the id of a running timer. So this is not actually stopping any timer. If you don't stop the timer it will continue to run. So the function here:

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

Will continue to run. So the next time you create a timer, you now have two timers updating x and it'll look like it's running faster.

Try this:

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

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

Your setTimer variable needs to exist in a scope outside of your click handler. As you had it you were declaring a new variable every time so when you try and clear the timer, you are not actually clearing the timer.

Also: freakish's point about how you are reattaching the click handler is also a problem. You need to fix that too.

Answer 2

The answer is that bad things happen because of this:

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

When you click on #start2 new handler is attached to .answer_holder2. So after for example 3 clicks, .answer_holder2 has 3 handlers attached to it and when you click on it all 3 fire.

You're code is a bit complicated and I'm not going to give you a solution how to fix that. But I can give you a hint. Put inner .click outside of outer .click. You will have to change some code probably, but that has to be done.

EDIT What you could try ( as a fast fix, but not necessarly good ) is adding this:

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

Additonally have a look at Matt's answer.