Javascript递归倒计时10s到0

时间:2014-01-29 03:45:49

标签: javascript php recursion real-time long-polling

我目前正在使用flipclock

我对时钟本身没有任何问题。时钟在我这边工作得很好。一直困扰着我的是在时钟结束后,我想为我的页面上的人们进行10秒的额外倒计时,以确保他们不想继续投票。

是。我正在实时做这个(同一页面上的每个人都会看到相同的倒计时)所以我正在使用长轮询来帮助我。对于长轮询,我正在使用来自Github的https://github.com/panique/php-long-polling

更糟糕的是,在最后10秒倒计时期间点击投票按钮的任何人都会将倒计时再次重置为10并递归执行,直到其他任何人都没有。

我正在考虑每当某人的时钟达到零时运行一个递归的javascript函数。这将确保进入最终倒计时时间范围的每个人,无论任何轻微的时间延迟,都将在相同的时间平均开始。

因为我实时运行它,所以麻烦的确是让连接到我的页面的每台其他计算机的计时都具有相同的倒计时。

我尝试的内容如下:

function resetTime(){
  $.post('<?php echo $path ?>/ajax_bid_room_files/last_seconds.php',function(data){   //this script will attempt to create new text file to keep track of time
    setInterval(function(){
      $.post('<?php echo $path ?>/ajax_bid_room_files/updatetiming.php',function(data){//this script will update text file to keep track of current countdown
        $("#remaining_timeleft").html(data); //where data is the current countdown
      });
    },1000);
  });
}


var clock2 = $('.bid_duration2').FlipClock({
  countdown:true,
  callbacks:{
    stop: function() {
      resetTime();
      if($("#remaining_timeleft").html()>0){
        $("#vote").click(function()){
          resetTime();
        }
      }
    }
  }
});

我在这里尝试尝试的是,一旦flipclock的倒计时停止,调用回调并加载resetTime()。如果在倒计时期间有人按#vote,则再次启动resetTime并重置时间。

我并不完全相信这会有效,因为我实际上每1秒间隔运行一个.post会调用一个php脚本来对文本文件执行fwrite(即使它不是数据库)但我怀疑请求将在一秒钟内完成。

但是,如果有人能在这里提供一些指导,我会很高兴地欣赏它。

或者,如果还有其他更好的解决方案,我也很乐意听到它们。

如果有任何疑问,请与我澄清。我很乐意澄清我的问题以获得更清晰的解决方案。

1 个答案:

答案 0 :(得分:0)

只需要在没有回调和ajax部分的情况下执行此操作,请保持简单:

var ctime = 10,
count = setInterval(showVote,1000);
$('.vote button').click(function() {
    clearVote();
});
function showVote() {
    --ctime;
    $('.time').html(ctime);
    if (ctime==0) {
        clearVote();
    }
}
function clearVote() {
    clearInterval(count);
    $('.vote').hide();
    $('.page').show();
}

Here a jsfiddle