如何每隔一小时更新一次变量，而无需用户刷新页面？

Question

Controller:

$number = rand(1, 100);

View:

<div id="lucky">
   Your lucky number: <?php echo $number ?>.
</div>

How can I update the value for $number every hour without manually refreshing the page? I can use setInterval from JavaScript/jQuery , but I would like do it exactly at full hour (0:00, 1:00, 2:00 etc...). What is the best way to do this? I can use PHP, CRON, JS and JS frameworks...

Answer 1

Try finding out what time it is now, figure out how long it is until the next full hour, then wait that long:

function doSomething() {
    var d = new Date(),
        h = new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours() + 1, 0, 0, 0),
        e = h - d;
    if (e > 100) { // some arbitrary time period
        window.setTimeout(doSomething, e);
    }
    // your code(May be an ajax call to show lucky num)
}

The check for e < 100 is just to make sure you don't do setTimeout on something like 5 ms and get it a crazy loop.

Answer 2

Here you go with a solution

 var d = new Date(); var firstTrigger = 60000* (60 - d.getMinutes()); // This is for 1st Time Trigger setTimeout(function(){ console.log("1st time trigger", rand(1, 100)); // This is continuous trigger every full hour setInterval(function(){ console.log("Continuous trigger every hour", rand(1, 100)); }, 3600000); }, firstTrigger); 

In your case, instead of console.log you will trigger your code.

Hope this will help you.