1
\$\begingroup\$

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.
\$\endgroup\$

migrated from stackoverflow.com Feb 14 '12 at 23:00

This question came from our site for professional and enthusiast programmers.

  • 1
    \$\begingroup\$ This seems like a sensible model, since you can't setup a proper Observer pattern. You could send out an AJAX request with no timeout, and have the server not respond until it needs too. That would be able the closest to an Observer pattern as you could get I would think. \$\endgroup\$ – crush Feb 14 '12 at 22:47
  • \$\begingroup\$ Is this for a simple web-page/site, or a more complex webapp integration? \$\endgroup\$ – Jlange Feb 14 '12 at 22:49
  • \$\begingroup\$ For a complex webapp integration. Is that question to estimate the power of the webserver and the database server? \$\endgroup\$ – Prashant Palikhe Feb 14 '12 at 22:50
  • 1
    \$\begingroup\$ Focus/Blur isn't a solid bet. I'm willing to bet at least one user will use two monitors and leave your "feed" up on one screen, while using the other and wonder why it isn't working. \$\endgroup\$ – Robert Feb 14 '12 at 22:55
  • \$\begingroup\$ In firefox and IE the focus event will fire after the window has loaded so your code might be redundant. stackoverflow.com/questions/1408699/… Also, why are you calling the updatePostsList() directly in the focus handler but not in the load handler? \$\endgroup\$ – DeviantSeev Feb 14 '12 at 22:55
2
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.