Problems with clearTimeout

Question

I have the following method when one of my div is being clicked:

   current_money = parseInt($(this).find('.text-white').text());
   var  current_category_id = $(this).find('.category_id').val();
   game.getQuestion(current_category_id, current_money);
   game.selected_question = $(this);
    var result = 15;
    var seconds = 15;
     check = function(){
        if(seconds < 0)
        {
            checkAnswer(-1, 0, null);
        }
        else
        {

            var percentage = Math.round((seconds / result) * 100);
            $('#countDownChart').data('easyPieChart').update(percentage);
            $('#time').text(seconds);
            seconds--;

            setTimeout(check, 1700); // check again in a second
        }
    }

    check();

This shows a popup.

When an element in the popup is clicked it calls the following method:

    function checkAnswer(id, is_correct, element)
{
    clearTimeout(check);
    blink(element, is_correct)

    var new_value;
    if(is_correct)
    {
       var old_value =  $('#game_points').text();
       new_value = parseInt(old_value)+current_money;
       game.num_correct++;
    }
    else
    {
        var old_value =  $('#game_points').text();
        new_value = parseInt(old_value)-current_money;
    }
    current_money = new_value;
    game.score = current_money;

    $('#game_points').text(new_value);
    game.disableQuestion();


    $.ajax({
        type: 'POST',
        url: '/Jeopardy/setAnswer',
        dataType: 'json',
        data: {
            request: 'ajax',
            answer_id: id,
            game_id: game.id,
            phase_id: game.phase_id,
            question_id: game.current_question.id,
            is_correct:is_correct
        },
        success: function (data)
        {

        }
    });
    game.questionBox.fadeOutAnimation();
    game.num_questions--;
    if(game.num_questions == 0)
    {
        game.finish();
    }
}

As you can see the first line i clear the timeout.

However it continues running untill seconds hits 0 and then calls the checkAnswer method.

Can anyone tell me why this is happening?

Update

Here is the top of my script:

    readUrlVars();
var status = true;
var current_question = null;
var questionBox;
var game = null;
var current_money;
var check;
jQuery(document).ready(function () {

    init();
    $('#game_table').on('click','.question',function()
    {
        if(status == 'true')
        {
           current_money = parseInt($(this).find('.text-white').text());
           var  current_category_id = $(this).find('.category_id').val();
           game.getQuestion(current_category_id, current_money);
           game.selected_question = $(this);
            var result = 15;
            var seconds = 15;
             check = function(){
                if(seconds < 0)
                {
                    checkAnswer(-1, 0, null);
                }
                else
                {

                    var percentage = Math.round((seconds / result) * 100);
                    $('#countDownChart').data('easyPieChart').update(percentage);
                    $('#time').text(seconds);
                    seconds--;

                    setTimeout(check, 1700); // check again in a second
                }
            }

            check();

        }
    })

    $('#option_list').on('mouseenter','.optionOutCss', function()
    {
        $(this).attr('class','optionOverCss');
    })
    $('#option_list').on('mouseleave','.optionOverCss', function()
    {
        $(this).attr('class','optionOutCss');
    })

})

Update 2

Ive updated my code to the following:

           timeout = setTimeout(timer, 1700);

function timer()

{

if(seconds < 0)
{
    checkAnswer(-1, 0, null);
}
else
{

    var percentage = Math.round((seconds / result) * 100);
    $('#countDownChart').data('easyPieChart').update(percentage);
    $('#time').text(seconds);
    seconds--;

    setTimeout(timer, 1700); // check again in a second
}
}


    clearTimeout(timeout);

however this did not change anything.

Answer 1

You are not clearing the timeout.

When you set the timeout use,

 timeout = setTimeout(check, 1700);

when you clear the timeout use,

 clearTimeout(timeout);

See the documentation

---

Also because your timeout is a constant, you can use the function setInterval here and get rid of the recursion,

current_money = parseInt($(this).find('.text-white').text());
var  current_category_id = $(this).find('.category_id').val();
game.getQuestion(current_category_id, current_money);
game.selected_question = $(this);
var result = 15;
var seconds = 15;

var check = function(){
    if(seconds < 0)
    {
        checkAnswer(-1, 0, null);
    }
    else
    {
        var percentage = Math.round((seconds / result) * 100);
        $('#countDownChart').data('easyPieChart').update(percentage);
        $('#time').text(seconds);
        seconds--;
    }
}

interval = setInterval(check, 1700);

Then clear it with,

clearInterval(interval);

see documentation

Answer 2

This is because of execution cycle of your code, once the function has started executing it will run until you return from that function. can you tell what functionality you are trying to achieve may be that can help in understanding and a diffrent approach can be thought of