4
\$\begingroup\$

Using PHP and jQuery, I was able to make this countdown timer. I've searched various books and obviously on Google, but couldn't find this type of approach as used by me here. I sincerely feel there is something wrong with it. Can anyone tell me if this is the right approach?

                 <!DOCTYPE html>
 <html>
<head><script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$("#recdisp").load("countdown.php");
 });
     setInterval( function(){   $("#recdisp").load("countdown.php")}, 1000 );
</script>
<div id="recdisp"></div>
                 </html>

recdisp.php

                         <?php
  date_default_timezone_set("Asia/KolKata");

  $time=1434402728+3600000*24*10000;//some time in future.
 echo "<div class=\"d\">";
  echo (date("d",$time-time())-1);
  echo "</div>";
  echo "<div class=\"l\">";
  echo " Days ";
  echo "</div>";
  echo "<div  class=\"d\">";
  echo (date("h",$time-time()));
  echo "</div>";
 echo "<div class=\"l\">";
  echo " Hours ";
 echo "</div>";echo "<div  class=\"d\">";
    echo (date("i",$time-time()));
  echo "</div>";
 echo "<div class=\"l\">";
 echo " Minutes ";
 echo "</div>";
  echo "<div  class=\"d\">";
  echo (date("s",$time-time()));
 echo "</div>";
echo "<div class=\"l\"  >";
 echo " Seconds ";
 echo "</div>";
 ?>
\$\endgroup\$

1 Answer 1

Reset to default
9
\$\begingroup\$

Transferring data from a client to a server is an expensive procedure, and should be minimized as much as possible. If the purpose of your PHP is to simply provide formatted time data, I would highly recommend letting your client do as much processing and formatting as possible

For example, what happens if the client loses internet connection? The process will fail and the counter will not count down.

What if the connection to the server is slow or inconsistent? The responses from the server may not return in the expected order, resulting in a countdown timer with unpredictable behavior.

Proposed solution:

  • PHP script processes date and returns UNIX timestamp
  • HTML page contains static divs with element IDs accessible to jQuery
  • On $(document).ready, only once, use the $.get function instead of $("#id").load to load the timestamp from the server and parse it as a Date object
  • Start your timer with a callback that processes the date and populates the div structure once per second.

Sample code, as requested:

recdisp.php:

<?php
    date_default_timezone_set("Asia/KolKata");
    $time=1434402728+3600000*24*10000;//some time in future.
    echo $time;
?>

timer.html:

<!doctype html>
<html>
<head>
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

    var timestamp;

    function updateClock() {
        console.log(timestamp);
        var date = new Date(timestamp*1000); // multiply by 1000 because Date() uses milliseconds

        // ...

        $("#seconds_div").html(date.getSeconds());
        timestamp -= 1; // decrement timestamp by 1 second.
    }

    // when the document is loaded, make an ajax call to load the timestamp
    $(document).ready(function(e) {
        $.get("recdisp.php", function(data) {
            timestamp = parseInt(data);
            setInterval(updateClock, 1000);
        });
    });

</script>
</head>

    <body>
       ...

       <div class="d" id="seconds_div"></div>
       <div class="l">Seconds</div>

    </body>
</html>

I will let you fill in the blanks

\$\endgroup\$
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.