如何使jquery倒计时器连接到ajax动作?

时间:2013-07-13 20:19:31

标签: php javascript jquery ajax pdo

我想要完成的是在我的系统上单击某个动作时,菜单被隐藏(禁用)并被倒计时器取代。倒数计时器启动后,我希望菜单被取消隐藏并向下滑动。

当我执行操作时,我会隐藏菜单,你运行正常。但当谈到倒计时时,我用谷歌搜索了一些并发现了这个并改变了它来尝试它。但这似乎没有做任何事情。

这是计时器代码:

 var coolDownTime = 10;

    function coolDownTimer() {
        setTimeOut (function() {
            if(coolDownTime != 0) {
                coolDownTime--;

                coolDownTimer();
            } else {
                $("#target_area").slideDown('medium');
            }
        }, 1000);
    }

以下是隐藏菜单的方法:

 $('[name=action]').click(function () { 
   $("#target_area").slideUp('medium');

   return false;
 });

我在这里做了一些其他的ajax来执行某些操作,然后我将菜单滑起来。

此时我想倒计时开始,倒计时结束时,我想要 回来的行动让他们可以再次继续选择。

我认为当前方法存在的问题是,如果我将定时器代码放在同一个单击语句中,我将其中的菜单隐藏起来就会完全停止工作。我很迷茫。有没有人做过类似的事情并知道解决方案?

1 个答案:

答案 0 :(得分:0)

我有点挖掘和逻辑,我想出了这个。 。

$('.trigger').on('click', function(e) {
    $(this).html('show')
    $('.show').slideUp('medium');
    var count = 10,
        counter = setInterval(timer, 1000);

    function timer() {
        count--;
        if (count <= 0) {
            clearInterval(counter);
            $('.trigger').html('hide');
            $('.show').slideDown('medium');
            return;
        }
        console.log(count);
        $('.timer').html(count);
    }

});

Fiddle