AJAX Interval Refresh?

Question

I'm trying to make an AJAX function update about 30 seconds. I have a simple version of that done, here is the code.

var refInterval = window.setInterval('update()', 30000); // 30 seconds

var update = function() {
    $.ajax({
        type : 'POST',
        url : 'post.php',
        success : function(data){
            $('.voters').html(data);
        },
    });
};

This works, however, when the function is FIRST called I don't want it to wait 30 seconds, I just want the function to call, then wait 30 seconds, call again, wait 30 seconds, call again, etc. Any help?

Answer 1

Consider using setTimeout instead - it's more reliable. setInterval timers can stack when the window doesn't have focus and then all run at once when it gets focus back again. Using setTimeout also ensures that you don't get multiple AJAX requests queued up if the first one blocks for some reason.

To start the loop immediately, use an IIFE ("immediately invoked function expression") wrapped around the function:

(function update() {
    $.ajax({
        ...                        // pass existing options
    }).then(function() {           // on completion, restart
       setTimeout(update, 30000);  // function refers to itself
    });
})();                              // automatically invoke for first run

p.s. don't use string arguments to setInterval or setTimeout - just pass the function reference directly.

Answer 2

Just call update right after you define it:

var refInterval = window.setInterval('update()', 30000); // 30 seconds

var update = function() {
    $.ajax({
        type : 'POST',
        url : 'post.php',
        success : function(data){
            $('.voters').html(data);
        },
    });
};
update();

Answer 3

Call update once (on document ready) before calling it with the interval:

update();

var refInterval = window.setInterval('update()', 30000);