Attempting to wait for multiple ajax requests

Question

function deployAddRecs(){
    for (let i = 0; i < vanArr.length; i++){
        addRecAjax.push(
            $.get(url, {
                act: "API_AddRecord",
                _fid_8: "Unplugged",
                _fid_10: vanArr[i]
            })
        );
    }
    $.when(addRecAjax).done(function(){
        window.location.reload();
    });
}

Hey everyone, I'm having a very frustrating problem ensuring all of the ajax requests in my array are completed before proceeding.

From the code snippet provided above, I am utilizing a database's API to add records to a table with specific information in the record. From my understanding of the documentation, the callback function is executed in .done() once all the requests in the array are successful.

However, the page is reloading prior to requests being completed, because from observation the page reloads before all records are added. Any help would be amazing.

Ankit · Answer 1 · 2018-08-03T22:06:39.163

$.get() implements the Promise interface. so you just need to change your code to

function deployAddRecs(){
for (let i = 0; i < vanArr.length; i++){
    addRecAjax.push(
        $.get(url, {
            act: "API_AddRecord",
            _fid_8: "Unplugged",
            _fid_10: vanArr[i]
        })
    );
    }
   Promise.all(addRecAjax).then(window.location.reload())
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

score 0 · Answer 2 · answered Aug 03 '18 at 22:00

The problem with your implementation is that the for loop is synchronized and is completing before your requests are completed. If you know the number of requests that you have, you can chain them together with the .then() callback.

Although, it appears that you might have an unknown number of requests for your problem. So you might want to use promises.

Here is a good stack overflow post about chaining ajax requests, and here is jQuery documentation regarding promises. Note that you don't need to use jQuery to use a promise, but the wrapper is nice if you're already using the library.

score 0 · Answer 3 · answered Aug 03 '18 at 22:15

You can use when(), but you have to use it in conjunction with apply() since you have an array, rather than knowing the number statically.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

//static example
$.when(promise1, promise2, promise3).then(...)
//dynamic example
$.when.apply($, [promise1, promise2, promise3]).then(...)

Apply will take the array argument and turn it into the static version that it expects.

var promise1 = $.Deferred();
var promise2 = $.Deferred();
var promise3 = $.Deferred();
var promises = [ promise1, promise2, promise3 ];

$.when.apply($, promises).then(function ( data1, data2, data3 ) {
  console.log( data1, data2, data3 );
});

promise1.resolve('apply');
promise2.resolve('is a');
promise3.resolve('nice method');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Attempting to wait for multiple ajax requests

3 Answers3