AJAX Interval Refresh?

问题:

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?

回答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.

回答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();

回答3:

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

update();

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

回答4:

Invoke the function before setting the timer.

Like so:

 var update = function() {
     $.ajax({
        type : 'POST',
        url : 'post.php',
        success : function(data){
            $('.voters').html(data);
        },
    });
};
update();
var refInterval = window.setInterval('update()', 30000); // 30 seconds

回答5:

just put the setTimeout into your successhandler and it should work like charm

var update = function() {
    $.ajax({
        type : 'POST',
        url : 'post.php',
        success : function(data){
            $('.voters').html(data);
            var refInterval = window.setTimeout('update()', 30000); // 30 seconds
        },
    });
};

update()