Jquery 'each' wait for the ajax process to finish then continue the loop

Question

I want to run ajax in every loop of the selected checkbox. However 'jquery each' ignores the ajax process. Completed or not completed the loop will continue. Sorry for my language, hope it's understandable.

Here is an example of the code I made.

$('input[name="options[]"]:checked').each(function() {
  jQuery.ajax({
    url: "www.example.com",
    type: "POST",
    data: {
      name:name
    },
    success: function(data) {
      // do something
    }
  });
});

I have tried using async:false in the ajax option, but the page freezes, and will return to normal after the process is complete.

Does this answer your question? [Wait until all jQuery Ajax requests are done?](https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done) — Justinas, Oct 18 '21 at 18:29
I think it's different, because it's inside a loop / jquery each — kingdom yo, Oct 18 '21 at 18:37
No it's not. `$.each(function () {ajaxes.push($.ajax)}); $.when(ajaxes).done()` — Justinas, Oct 18 '21 at 18:40
could you please write the code with a little explanation in the answer column? I would really appreciate that. — kingdom yo, Oct 18 '21 at 18:44

score 2 · Accepted Answer · answered Oct 18 '21 at 18:56

So all you have to do with any kind of Promise batches is gather all of them to array and pass to "batch Promises" function. No matter if it's jQuery, Angular or other


// Gather all promises returned from $.ajax
var allPromises = [];

$('input[name="options[]"]:checked').each(function () {
    allPromises.push(
        callAjax($(this).val()
    );
});

$.when(allPromises).then(function () {/* do something after all*/})

function callAjax(name) {
    // Returns promise from $.ajax
    return jQuery.ajax({
        url: "www.example.com",
        type: "POST",
        data: {name: name},
        success: function (data) {/* do something after this call*/}
    });
}

Carsten Massmann · Answer 2 · 2021-10-18T19:22:46.100

Here is an alternative solution using fetch(), as it is available in all modern browsers (no jQuery needed):

const jsrv='https://jsonplaceholder.typicode.com/',
      arr='users,posts,comments'.split(',');
      
Promise.all(arr.map(e=>fetch(jsrv+e).then(r=>r.json())))
       .then(console.log)

.as-console-wrapper {max-height:100% !important}

In this sample script I collect the responses from three Ajax calls to the publicly avaible resource provided by typicode.com: The resulting array then consists of three arrays containing the users, posts and comments. In my demo I simply provide console.log as the processing function. This will of course be different in a real life situation.

fetch can be used with POST too, see here for more details: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch .

Jquery 'each' wait for the ajax process to finish then continue the loop

2 Answers2