XHR run simultaneously within a for loop

Question

So I have a for loop which goes through an array of variables, and for each of the variables it opens up a new XHR connection (to upload images to a server).

Problem is, it loops through all the items and runs the next upload before the first upload has completed. This is not ideal if a person is uploading a large group of files at once.

Is there any way I can force the loop to stop until the XHR connection is complete?

Thanks!

Answer 1

In pseudocode, with a little jQuery thrown in:

Get list of files from upload dialog box
For each File {
    create FormData object, append File to it.
    create xhr object, set parameters (url, etc.)

    // This is the callback run whenever an upload job comletes
    xhr.onload = {  
        if there's another xhr upload queued {
            dequeue it
        }
        if there's another entry in the completed queue {
            dequeue it
        } else {
            all uploads complete: tidy up
        }
    }
    // An extra to let the user know what's happening
    xhr.onprogress {
        update whatever progress bar we have
    }
    // add jobs to two queues. The first queue contains the actual
    // upload jobs that are dequeued by the onload callback
    // Because uploads may not finish in the order they were started
    // we track the completed jobs in a second queue. The onload callback
    // also dequeues this, and if the queue is empty knows to tidy up.
    add xhr job to queue
    add no-op job to completed queue 
}
// at this point everything is queued. Start the process...
for (number of concurrent uploads) {
    dequeue an xhr job
}
// Sit back and wait... As the initial batch of xhr jobs complete
// their respective onload callbacks each start another upload job
// until they're all done. The last callback to execute turns out the lights...

Because this is asynchronous code, things don't always happen in the order one expects. The onload callback is set up before the job is queued, but executes after the job is complete. It can take a while to get your head around this.

This pseudcode is taken from a jQuery implementation of a file uploader I wrote for an image manager project. It makes use of the jQuery .queue methods to store and track the remaining xhr jobs. The actual code is too complex to reproduce here.

Answer 2

See http://www.html5rocks.com/en/tutorials/async/deferred/

and more discussion here https://github.com/caolan/async

async.parallel([
    function(){ ... },
    function(){ ... }
], callback);