0

I was playing with jQuery and async calls last night and found an unusual issue. I wanted to run multiple Ajax calls inside a loop. I wrote the below (where rand.php just sleeps for a second and returns a random number). Somewhat surprisingly it executes synchronously and takes 20 seconds or so to finish.

$(document).ready(function () {
    $([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]).each(function() {
        var number = this;

        $.get("rand.php", function(data) {
            $('#'+number).html(data);
        });
    });
});

The PHP code is as follows,

<?php
sleep(1);
echo rand(); 
?>

I was thinking this is clearly wrong as the async calls should be no blocking and return almost in parallel. After much playing around (assuming it was a server issue) I discovered that appending anything to the URL to make it look like it was different worked as expected. That is it returned in 3 seconds or so (6 or so calls at a time).

$(document).ready(function () {
    $([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]).each(function() {
        var number = this;

        $.get("rand.php?"+number, function(data) {
            $('#'+number).html(data);
        });
    });
});

I don't suppose a jQuery/Javascript Guru can explain this behavior? Is it some browser limitation? Why is it that only when the URL's are different that it runs as I would expect?

EDIT - Rather then reply, this was using Chrome (whatever the latest is) and Firefox 5/6. I did try it in IE which did cache it, so ignored that and focused on Chrome. Interesting the first one works as expected in IE9 on the first page load, but then just displays cached results when reloaded.

Ben
  • 1
  • 1
  • 1
    Are you sure it's not a caching issue? – Marko Aug 18 '11 at 01:58
  • Have you tried this in other browsers? It could be a caching issue. See what happens when you do a post instead. – Johnus Aug 18 '11 at 01:59
  • See this SO Question: http://stackoverflow.com/questions/561046/how-many-concurrent-ajax-xmlhttprequest-requests-are-allowed-in-popular-browser – Andrew Cassell Aug 18 '11 at 02:26
  • Yep not a caching issue. I would assume that would make it return instantly though. Had a look at the link above, and no dice. Its not that I am expecting all to run, but I would expect more then 1 person second which is what I was getting. – Ben Aug 18 '11 at 03:05
  • I think the question is misleading. The actual problem is not jQuery. If you remove the `sleep` statement from your PHP script, I'm almost certain all 20 requests will be instantaneous. It has nothing to do with caching or hitting the same URL. Are you using a web server in front of PHP? Also, how many processes, and how many threads per process is your web server allowed to keep open at any given time? Do you see the same behavior if you make direct requests to the same URL from the command line? Skip all JavaScript and AJAX, and verify that its not a server issue first. – Anurag Aug 18 '11 at 03:19
  • @Anurag That's correct. If you remove sleep it its all instantaneous, but that's only because they are returning so quickly. If you set it up over the a network (without sleep) it still takes 5 seconds or so as you get 250ms lag between each request. However if you add the random URL thing it loads in chunks of 6 or so. I am expecting that I should get some amount loading at the same time. – Ben Aug 18 '11 at 03:46
  • You can actually see if the requests are being made sequentially, or simply stuck waiting for the server in your browser. Open the Network tab in Developer Tools, and see if the requests are queued up. I tried exactly the same example (on Rails), and this is what I see. Initially all 20 requests were [queued up instantly](http://imageshack.us/photo/my-images/155/screenshot20110817at827.png/#), but the server responded to them one by one resulting in [this](http://imageshack.us/photo/my-images/41/screenshot20110817at827.png/). – Anurag Aug 18 '11 at 05:33

1 Answers1

0

You are in ie aren't you. Bad! Bad IE user! IE caches get requests as if it was any other content. Jquery has a built in function to address this: 

$.ajaxSetup({ cache : false });

This will add a nifty spoiler to take care of this. But why add the spoiler in other browsers? So usually I do this:

if(!+"\v1"){
    $.ajaxSetup({ cache : false });
}

Which is the tests for IE and set it only in that browser.

Fresheyeball
  • 29,567
  • 20
  • 102
  • 164
  • http://webreflection.blogspot.com/2009/01/32-bytes-to-know-if-your-browser-is-ie.html about the detection of IE – Fresheyeball Aug 18 '11 at 02:14
  • Actually in Chrome... and Firefox. Didn't really test IE at all. Besides if it was cached shouldn't it return almost instantly rather then the 20seconds or so it took to run? – Ben Aug 18 '11 at 02:54
  • Then it has to be serverside. I believe the time delay is latency in making calls. Care to post a fiddle? – Fresheyeball Aug 18 '11 at 02:59
  • Sure, of the server config? Its literally just a stock standard xampp http://www.apachefriends.org/en/xampp.html setup. – Ben Aug 18 '11 at 03:07
  • Not config. What it would be I have no idea on the server side. – Fresheyeball Aug 18 '11 at 03:29
  • The PHP code is added to the question. I don't think that's the issue though as the whole thing should run faster then 20 seconds assuming it runs them asynchronously. – Ben Aug 18 '11 at 04:28