Javascript递归倒计时10秒到0答案

【问题标题】：Javascript recursive Countdown 10s to 0Javascript递归倒计时10秒到0
【发布时间】：2014-02-20 16:48:04
【问题描述】：

我目前正在使用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();
        }
      }
    }
  }
});

我在这里实际尝试的是，一旦翻转时钟的倒计时停止，就会调用回调并加载 resetTime()。如果在倒计时期间有人按下#vote，resetTime 将再次启动并重置时间。

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

但是，如果有人可以在这里提供一些指导，我将不胜感激。

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

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

【问题讨论】：

了解 Web Sockets

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

【解决方案1】：

只需不使用回调和 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

【讨论】：