Reload a page using jquery only when the previous reload is complete

advertisements

I have a page which currently refreshes itself every 10 seconds. The page runs a series of database queries and shows the results.

The problem is that sometimes the queries take up to a minute to run but the page still refreshes every 10 seconds so I end up with 6 sets of database queries being run, and so on. I know this as I log the action in the database with start and end times of the queries.

$(document).ready(function() {
var refreshId = setInterval(function() {
       $("#content").load('myurl.php?id=1');
    }, 10000);
});

How can I change it so the refresh only happens when the page has finished processing queries or 10 seconds whichever is longest?


Why not just set a flag and skip the reload if the last one hasn't finished yet? Something like the following (untested but shows the basic idea)

var loading = false;

var refreshId = setInterval(function() {
       if (loading)
           return;

       loading = true;
       $("#content").load('myurl.php?id=1', function() {
           loading = false;
       });
    }, 10000);
});