clearTimeout存在问题

时间:2015-01-05 09:21:38

标签: javascript jquery settimeout

点击我的一个div后,我有以下方法:

   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();

这会显示一个弹出窗口。

单击弹出窗口中的元素时,会调用以下方法:

    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();
    }
}

你可以看到第一行我清除超时。

然而,它会继续运行,直到秒为0,然后调用checkAnswer方法。

谁能告诉我为什么会这样?

更新

这是我的剧本的顶部:

    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');
    })

})

更新2

我已将我的代码更新为以下内容:

           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);
然而,这并没有改变任何事情。

2 个答案:

答案 0 :(得分:2)

您没有清除超时。

设置超时使用时,

 timeout = setTimeout(check, 1700);

清除超时使用时,

 clearTimeout(timeout);

请参阅documentation


另外因为你的超时是一个常量,你可以在这里使用函数setInterval并摆脱递归,

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);

然后用,

清除它
clearInterval(interval);

请参阅documentation

答案 1 :(得分:1)

这是因为代码的执行周期,一旦函数开始执行,它将一直运行直到你从该函数返回。你能说出你想要实现的功能可能有助于理解,可以想到不同的方法