How to perform Ajax requests, a few at a time

Question

I am not really sure it is possible in JavaScript, so I thought I'd ask. :)

Say we have 100 requests to be done and want to speed things up.

What I was thinking of doing is:

• Create a loop that will launch the first 5 ajax calls
• Wait until they all return (success - call a function to update the dom / error) - not sure how, maybe with a global counter?
• Repeat until all requests are done.

Considering browser JavaScript does not support thread, can we "exploit" the async functionality to do that? Do you think it would work, or there are inherent problems doing that in JavaScript?

Answer 1

Yes, I have done something similar to this before. The basic process is:

1. Create a stack to store your jobs (requests, in this case).
2. Start out by executing 3 or 4 of the requests.
3. In the callback of the request, pop the next job out of the stack and execute it (giving it the same callback).

Answer 2

I'd say, the comment from Dancrumb is the "answer" to this question, but anyway...

Current browsers do limit HTTP requests, so you can even easily just start all 100 request immediately, and the browser will take care of sending those requests as fast as possible, but limited to a decent number of parallel requests.

So, just start them all immediately and trust on the browser.

However, this may change in the future (the number of parallel requests that a browser sends increases as end-user internet bandwidth increases and technology advances).

EDIT: you should also think and read about the meaning of "asynchronous" in a javascript context.. asynchronous here just means that you give up control about something to some other part of a system. so "sending" an async request just means, that you tell the browser to do so! you do not control the browser, you just tell it to send that request and please notify me about the outcome.