Jquery and setinterval

JavaScript
1

i have a number let say … number of visitors for a page (it’s not that but similar in some way)

i’m using jquery to show how many visitors the site got , and i have a div that contain the number let say

<div id=“counter”> </div>

and in the jquery i have the followings :

<script>

// the call for the update (it just change an entry in the db total = total + 1;	
	function autoupdate() {
	
	$.post("count.php", {count:1},
  function(data){
   $("#counter").html(data);
  });}

// the 1 sec interval  
  $(document).ready(function() {
    setInterval("autoupdate()", 1000);
  }); 
  </script>

question : would that be too harsh on a shared server if it receive a lot of visitors ? any better solution (other than making it 5 sec’s or more …)

my aim is to show a live counter , with live update like g-mail (like how many mb they are hosting … i know their example is fake …but wanted to do something similar)

2

Obviously it depends on what your definition of “many visitors” are. I don’t know how your back-end php script works but I’m guessing it’s a pretty resource cheap operation? Altough it will generate alot of http requests, I think you’re relativetly safe with it.

3

You could use an Ajax request with the ifModified header.
Or you could just use the load function.
The one second interval creates a huge amount of requests, which I wouldn’t recommend…
Nobody is really looking to the counter every second, so you can increase the interval without upsetting anybody.

What really concerns me is what happens if counter.php could not be loaded within the one second interval.
Imagine someones internet connection breaks down right after they visit your website.
The page counter.php could not be loaded, and after 30 seconds you’ll have 30 open connections…
So don’t use setInterval with ajax requests, but rather use setTimeout after the ajax request completed or returned an error.

I would recommend something like below, but you could use one of the other ajax functions of jQuery, whichever suits you best.

jQuery(document).ready(loadCounter);

function loadCounter () {
    $("#counter").load("counter.php", {}, function(responseText, textStatus, XMLHttpRequest){
        setTimeout(loadCounter, 5000);
    });
}
4

Thanks Hexburner , i appreciate it !