Looping javascript timer that ignores Web page refresh

Question

No experience in this matter, obviously - I basically cobbled together code up to this point.

I have demo Website for potential clients to visit - they can log into the dashboard and basically mess everything up and an hour later a cron job will restore a database dump stored elsewhere on the server.

I came across this block of code thinking it would be useful and considerate to show a 60-0 timer, letting visitors know how long before the Website would 'reset.' It then starts at 60. However upon a browser refresh, so does the counter. I styled it with CSS so it had an informative label and the whole block of code went into an HTML widget from the site's dashboard.

I'm thinking this might not be sophisticated enough to handle a browser refresh. Any suggestions?

<style type="text/css">
#notice {font-size:150%; float:left; padding-right:10px;}
#time {font-size:150%;}
</style>

<script type="text/javascript">

   var m=60; /*this value may be edited to suit your requirements*/

   var s=0;
   var temp=m-1;

window.onload=function() {
   tenMinutes();
 }
function tenMinutes(){
   s--;
if(s<0) {
   s=59;
   m--;
 }
if(m==-1) {
   m=temp;
 }
if(m<10) {
   mins='0'+m;
 }
else {
   mins=m;
 }
if(s<10) {
   secs='0'+s;
 }
else {
   secs=s;
 }
   document.getElementById('time').firstChild.nodeValue=mins+':'+secs;
   cd=setTimeout('tenMinutes()',1000);
}
</script>
<div style="width:300px;">
<div id="notice">This Website will reset in:</div>
<div id="time">60:00</div></div>

Answer 1

Since you (apparently) control the the cron job, and say it executes every full hour, you can use JavaScript to calculate the time difference between now and the next hour .

This, of course, relies on the server and visitor having their clocks in sync, as far as minutes/seconds are concerned. Keep in mind that there are time zones with half-hour offsets and the likes.

If you want it to be more exact, you'll need to have some server-side logic to store the time/date of the next reset.

You can either do it somewhere in your application code, or you could just use the cronjob to write the the time information in a suitable format into your files.

Answer 2

So remember that when the user tells the browser to reload the webpage, its essentially the same thing as you rebooting your computer. The browser is going to reload the entire page from scratch and that also means that its going to start executing any javascript from the beginning. There isn't really any way to avoid this.

If you want to avoid that, you have to find a way to avoid having the browser reload the javascript, or probably better, use a persistent data store in order to store data that can tell the browser where it left off before the page was reloaded (like saving a file to disk before rebooting, to continue the metaphor from above).

One idea would be to persist a datetime value to a cookie or back to the server when the page first loads. You could then check for this value and if it exists assume the timer is started and measure how much time has passed has passed.

Hope that helps.

Answer 3

Since your server time will be in sync with the cron, I would add the time inside your javascript using php time()

As it's been said, obviously hard coding the minutes reset the timer on page reload, and relying on the user's system time is not reliable as it might not be in sync with the server.