Question

I’m trying to get request a json object from the server each 10 seconds using this:

setInterval(function(){
  $.ajax({
    url: '/',
    success: function(data){
      //do stuff with data
    }
  });
}, 10000);

But this isn’t very efficient. I know about long-polling, but I don’t think it’ll make a big difference. I know I will receive new data each 10 seconds, so doesn’t that make long-polling the exactly same as setInterval in terms of efficiency?

Is browser-side caching a good solution for this problem?

The JSON object I’ll be getting looks like this:

var data =  {1: {'user': 'John', 'age': '25'}, {2: {'user': 'Doe', 'age': '30'}}

With this, I want to display data[0].user for a few seconds and after that smoothly change it into data[1].user by using ‘fadeOut’ and ‘fadeIn’ and so on until it runs out of users.
I basically want to create a slideshow of the user’s usernames.

Would caching be a good solution or should I stick with making ajax calls every 10 seconds? If so, then how would I implement this and if not, what method should I use?

I’m not sure if i explained it good enough, so tell me if something is still unclear.

Answer 1

I would definitely think about caching. Especially if you get sets with a lot more users, making an AJAX request every 10 seconds could easily overload your server. However, if you want to keep it simple, make a request every few minutes instead, to update. Cache the users, have them generated into the javascript code, say users = new Array(user1, user2, …). You don’t really have to keep updating the page if it’s not that important, as most users would navigate away within a minute or two anyways. If you have a long list that changes every few seconds, that gives you enough time to not ever have to update using AJAX, and just rely on the server generated list of users.

If not, store the last time you updated the list in a variable, and send the time as an argument to your server when you’re updating via AJAX, and then have the server quickly check what new users were added, and send just those. Then, just merge the new array of new servers with the old array. I highly suggest not making a call every 10 seconds for a new name though. Not only will you run up more bandwidth on your server, you will increase the CPU usage when it has to find the next user in the list for you, and then send you that one. For good practice, always let the client do as much of the work as possible, without having lag. There is only one server, but many more clients. Each operation you shift to the clients will save your server hundreds, if not thousands, of operations.

As for long polling vs setInterval, I would recommend setInterval in that case. You can at least send a request with a time argument, specifying the last update time, and thus only needing to send that small portion, instead of the entire data array.

var storage = new Array(user1, user2, ...); //set all your data here, generate it from your server
var lastUpdate = //set the last time you updated it, just create a date variable

function rotateUsers()
{
    //do your fade in and fade out here
}

function update()
{
    //create a new HttpRequest, and then set the url as "yoursite.com/update?lastUpdateTime="+lastUpdate;
    //Take the response data, and merge the new users list with the old one
}
setInterval('rotateUsers()',10000);
setInterval('update()',60000); //update once a minute