Update progress bar based on AJAX requests in for loop

[fheppell]

I have this function:

function (Blobs) {
    console.log(JSON.stringify(Blobs));
    // Make the progress bar here
    Blobs.forEach(function(Blob) {
        console.log(Blob);
        $.post(window.location.href + '/add', Blob);
        // Increment the progress bar by the correct amount, once above request has completed
    });
}

(This function is passed as an argument, hence no name)
I want a progress bar to be shown, showing how many of the 'n' requests have returned. The page the request is POSTing to may take some time (5ish seconds) to respond, and the loop may need to run multiple tens of times. Once all the requests have completed, I need to redirect to another page.

Any help would be great!

[diafol]

Are you counting the number of blobs and giving a blob a specific percentage of total progress, e.g. 20 blobs = 5% per blob?

Are you looking for a progress bar or do you have one in mind? There are hundreds of these kicking around.

The problem you may face is where to place the redirect. If you place it outside the loop, then it will probably redirect before an ajax is run, as ajax requests are asynchronous. One way would be to count the blobs and then pass the numBlob variable and a counter to the Ajax callback - when they are equal (100% progress), then and only then do you redirect. Having said that, you'd probably need to use a recursive Ajax function as the incrementer (counter) would cause many async ajax calls. Have a look here for a simple script:

http://jsfiddle.net/diafol666/zs7xfude/7/

[fheppell]

From what I can see, the code needs to do this:

1. Count the number of items in the Blobs array
2. Calculate the percentage per Blob sent
3. When request is complete, increment the progress bar
4. When ALL the requests are complete, redirect

It's numbers 3 and 4 that I'm having trouble with right now.
I'm not sure how exactly.

I'll try and implement that code sample, and I'll come back with the results later. Thanks for the help so far.