AJAX Interval Refresh?

jquery ajax intervals
bin0 picture bin0 · Jun 30, 2014 · Viewed 25.4k times · Source

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

Alnitak picture Alnitak · Jun 30, 2014

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.

Related questions

jQuery AJAX submit form

I have a form with name orderproductForm and an undefined number of inputs. I want to do some kind of jQuery.get or ajax or anything like that that would call a page through Ajax, and send along all the …

Read More
How do I return the response from an asynchronous call?

I have a function foo which makes an asynchronous request. How can I return the response/result from foo? I tried returning the value from the callback, as well as assigning the result to a local variable inside the function …

Read More
jQuery Ajax error handling, show custom exception messages

Is there some way I can show custom exception messages as an alert in my jQuery AJAX error message? For example, if I want to throw an exception on the server side via Struts by throw new ApplicationException("User name …

Read More