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 setIn

Solution 1:

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

functionupdate(){
    $.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();

Solution 2:

Try this code:

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

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

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

Solution 3:

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

Solution 4:

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 = newDate();
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 - newDate().getSeconds()) );

Solution 5:

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

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

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