Javascript recursive Countdown 10s to 0

Question

I'm currently using flipclock .

I'm having no problems with the clock itself. The clock is working fine on my side. What have been bugging me is after the clock finishes, I'd like to carry on an additional countdown of 10 seconds for people people on my page to make sure they do not want to continue voting.

Yes. I'm doing this in real time(Everybody on the same page will see the same countdown) so i'm using long polling to help me on this. For long polling i'm using https://github.com/panique/php-long-polling from Github.

To make things worse, anyone who clicks on the vote button during the final 10 seconds countdown will reset the countdown to 10 again and recursively do it till nobody else does it.

I'm thinking of running a recursive javascript function everytime someone's clock reaches zero. This will ensure everyone that enters the final countdown timeframe regardless of any slight time delay will start equally on the same timing.

Because i'm running this in real time, the trouble is really to get the timing on every every other computers connected to my page have the same countdown.

What I've tried is as follows:

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

What I'm actually trying to attempt here is once the countdown of the flipclock stops, a callback is called and resetTime() is loaded. If during this time of the countdown anyone presses #vote, resetTime is launched again and time is resetted.

I'm not entirely convinced this will work because I'm actually running a .post every 1 second interval that will call upon a php script to do a fwrite to a text file(even though its not to a database) but I doubt the request will be done in a second.

However, should anyone could provide some guidance here, I'll gladly appreciate it.

Or if there are any other better solutions, I'll be happy to hear them out as well.

Do clarify with me for any doubts. I'll be glad to clarify my questions to obtain clearer solutions.

Answer 1

Just do it without the callbacks and ajax parts, keep it simple like this:

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