jQuery countdown with update

Question

We are using the following countdown function on our bidding site.

setInterval(function(){
        $(".countdown").each(function(){
            var seconds = $(this).data('seconds');
            if(seconds > 0) {
                second = seconds - 1;
                $(this).data('seconds', second)
                 var date = new Date(null);
                 date.setSeconds(second); 
                 $(this).html(date.toISOString().substr(11, 8))
            }
          else
            {
              $(this).html("Finished");
    alert('finished');
            }
        });
    }, 1000);

we pass the number of seconds where we want the counter to appear (sometimes more than once on our page:

echo "<div id=\"".$auctionid."\" class=\"countdown\" data-seconds=\"".$diff."\"></div>";

So far it should be clear an it works. Now we have a situation where when someone bids somewhere on the site - the time left for auction is prolonged for 15 seconds, which is written to mysql.

$diff variable is calculated from mysql end time, and it's passed to jQuery on page load.

The question is how to check the mysql time for that auction and sync it in jQuery counter? We had the idea to maybe check every 5 seconds and after it reaches zero to make sure it's over? Any suggestions?

It should look nice to the user.

EDIT:

This is what we have so far:

$(".countdown").each(function() {

        var countdown = $(this);
        var auctionid = $(this).attr('id');

            var interval = setInterval(function() {

                        var seconds = countdown.data("seconds");

                        if( seconds > 0 ) {

                            var second = --seconds;
                            var date = new Date(null);
                            date.setSeconds(second);
                            countdown.data("seconds", second).html(date.toISOString().substr(11, 8))

                        } else {

                        //      countdown.html("Finished <img src=\"loading.gif\" class=\"tempload\">");

                            startUpdateingTimeFromDatabase(auctionid);

                            countdown.html("Finished");
                            clearInterval(interval);

                        }

            }, 1000);

});





function startUpdateingTimeFromDatabase(auctionid) {


            $.getJSON("timer.php?auctionid="+auctionid, function(response) { 
                // console.log(response.seconds); 

                    $(".countdown#"+auctionid).data("seconds", response.seconds);

                    if( response.seconds > 0 ) {
                        //  setTimeout(startUpdateingTimeFromDatabase(auctionid), 1000);
                    } else {

                    }

             });


}

This simply isn't doing what we need it to do. We need to update the seconds (query startUpdateingTimeFromDatabase) every time it reaches zero. Now I think there are two approaches. First is simply return seconds via startUpdateingTimeFromDatabase function and then do everything in the main function, second is update the div via startUpdateingTimeFromDatabase. I think first will be better but I simply can't find a way to do it properly.

Any help is appreciated. Thanks.

Answer 1

You store the seconds left in the elements data. So why not fetch the remaining time maybe via ajax and just pass the new seconds to the elements? Within the next interval run all times will be updated.

Something like this:

$.get("yourGetRemainingTimeScript.php", {auctionId: 1}, function(response) {
    $(".countdown").data("seconds", response.seconds);
});

How you check and get the remaining time is up to you. You can set the time for all everywhere again.

$(".countdown").data("seconds", 1337);

---

Another hint from my side: don't loop all elements with each in the setInterval. Create the intervals inside the loop once. Then your script doesn't need to search every second again over and over for the elements.

And clear the interval when it's finished.

$(".countdown").each(function() {
    var countdown = $(this);
    var interval = setInterval(function() {
        // do your stuff ...

        // when finished stop the interval
        if( finished ) {
            clearInterval(interval);
        }
    }, 1000);
});

Full working example.