Auto refreshing div in jQuery

Question

While implementing auto refreshing div in jQuery that fetches updates on posts periodically as can be seen on Twitter, Facebook etc.

I had to think about making the refresh as efficient as possible. I decided to send a request to the server every 30 seconds - 1 minute. And, the request will be sent only if the browser window is active.

var postUpdateIntervalID;
var interval = 30000;

$(window).load(function(){
    if (!postUpdateIntervalID) {
        postUpdateIntervalID = setInterval(function() {
            updatePostsList();
        }, interval);
    }
});

$(window).focus(function(){
    if (!postUpdateIntervalID) {
        updatePostsList();
        postUpdateIntervalID = setInterval(function() {
            updatePostsList();
        }, interval);
    }
});

$(window).blur(function() {
    clearInterval(postUpdateIntervalID);
    postUpdateIntervalID = 0;
});

function updatePostsList() {
    // Sends a request to the server to fetch new posts.
}

1. On load, set interval of 30 seconds to call updatePostsList.
2. On focus, call updatePostsList immediately. Then, set interval as above.
3. On blur, reset the interval.

Answer 1

If this is for a complex web application, I would recommend using some sort of MVC framework. Personally I prefer backbone.js. Here are some great resources that should help you develop a maintainable app, as well help with updating and refreshing views.

MVC explanation: http://msdn.microsoft.com/en-us/library/ff649643.aspx

Backbone.js: http://documentcloud.github.com/backbone/

Connection between the two: http://css.dzone.com/articles/backbonejs-mvc-javascript

As a more direct answer to your question, I believe the code you have looks fine. But if you have multiples modules in your application, running view refresh functions on timers is not a good idea.