CODEWITHSUNDEEP
javascriptjqueryajaxtime
arclite
arclite

Reputation: 528

AJAX jQuery - update content every full minute

I'm thinking on a clock that will refresh every full minute if system clock on users computer will look like this eg. 11:08:00, it'll refresh and 11:09:00 etc.

I've tryed to setInterval():

setInterval(function(){
    $.ajax({
        url: "../time.php",
        context: document.body,
        success: function(result){
            $('.time').html(result);
        }
    })
}, 60000);

But it's reloading every minute after page load.

Is there any solution?

Upvotes: 3

Views: 5352

Answers (6)

Sherin Jose
Sherin Jose

Reputation: 2526

Try this code:

var interval    =   0;
function start(){
    setTimeout( function(){
        ajax_function();
        interval    =   60;
        setInterval( function(){
            ajax_function();
        }, interval * 1000);
    }, interval * 1000);    
}

function ajax_function(){
    $.ajax({
        url: "../time.php",
        context: document.body,
        success: function(result){
            $('.time').html(result);
        }
    }); 
}

$( window ).load(function(){
    var time    =   new Date();
    interval    =   60 - time.getSeconds();
    if(interval==60)
        interval    =   0;
    start();
});

Upvotes: 4

userabuser
userabuser

Reputation: 443

If you want to run your function exactly on the minute based on the users system time, then you need to instantiate the Date time object and check the current state of getSeconds(), if it equals 0, then you are exactly on the minute, if not, you need to subtract its result from 60, then pass that to setTimeout which will invoke the setInterval function exactly on the minute.

Crude example;

var time = new Date();
var timeout = 0;

if ( time.getSeconds() != 0 ) {
   timeout = (60 - time.getSeconds());
}

setTimeout(function(){

    setInterval( function(){
    $.ajax({
      url: "../time.php",
      context: document.body,
      success: function(result){
        $('.time').html(result);
      }
    })}, 60000);

}, timeout);

Alternative example for the code golfers;

setTimeout(function(){

    setInterval( function(){
    $.ajax({
      url: "../time.php",
      context: document.body,
      success: function(result){
        $('.time').html(result);
      }
    })}, 60000);

}, (60 - new Date().getSeconds()) );

Upvotes: 2

Emil Borconi
Emil Borconi

Reputation: 3467

user2703250 almost got it right, please see edited verison below:

var d = new Date();
var n = d.getSeconds(); 
while(n !== 0){
d = new Date();
n = d.getSeconds(); 
if(n === 0){ dopage_update();}
}

function dopage_update(){
     $.ajax({
            url: "../time.php",
            context: document.body,
            success: function(result){
                  $('.time').html(result);
                  setTimeout(function(){dopage_update();}, 60000);
            }
          });
         }

Upvotes: 1

George
George

Reputation: 36784

setInterval() won't invoke its function immediately, the first time the function runs in this case will be 60 seconds after page load. You can make the following changes to get the result you're looking for:

  • Place your AJAX request in a function
  • Call the function as soon as the page loads
  • Use setTimeout() in the success function of .ajax(), rather than setInterval() around the whole thing. If there is an error with the request, setInterval() will carry on regardless, but setTimeout() won't go again until the request is successful.
  • Split the result, taking the seconds away, and if the result is different to what is already in .time, change it. This assumes that result is a string like 11:08:00
  • If you want to acknowledge when the server returns a time where the minute has changed, you need to check it every second
function update(){
    $.ajax({
        url: "../time.php",
        context: document.body,
        success: function(result){
            var secondless = result.split(':'), $time = $('.time');
            secondless = secondless [0]+':'+secondless [1];
            $time.html(function(_,v){
                return secondless != v ? secondless : v
            }
            setTimeout(update, 1000);
        }
    })
}
update();

Upvotes: 4

Marko Bonaci
Marko Bonaci

Reputation: 5708

If I undestood you correctly, you could check the clock the first time the action is run and use seTimeout to fire setInterval exactly when the clock reaches next hh:mm:00.

Upvotes: 0

brunozrk
brunozrk

Reputation: 783

var d = new Date();
var n = d.getSeconds(); 
while(n != 0){
    d = new Date();
    n = d.getSeconds(); 
    if(n == 0){
         setInterval(function(){
           $.ajax({
               url: "../time.php",
               context: document.body,
               success: function(result){
                    $('.time').html(result);
                }
             })
         }, 60000);
    }
}

Upvotes: 2

Related Questions