Wait for all Ajax request in each-loop

Question

How can I make sure anotherFunction() is called only when all the Ajax request are done without using async: false?

$(data).each(function(index, item) {
    
    $.ajax({
        url: "someUrl.com/someData?Id=" + item.id,
        success: function(result) {
            someFunction(result);
        }
    });

    anotherFunction();
        
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

you need to use promise.all – abhishek sahu Dec 15 '21 at 18:55 — abhishek sahu, Dec 15 '21 at 18:55

score 1 · Accepted Answer · answered Dec 15 '21 at 18:55

1

Use Promise.all, which will only fire the .then when all promises it is passed have completed:

let requests = [];

$(data).each(function(index, item) {

  let request = $.ajax({
    url: "someUrl.com/someData?Id=" + item.id,
    success: function(result) {
      someFunction(result);
    }
  });

  requests.push(request);

});

Promise.all(requests).then(() => anotherFunction());

answered Dec 15 '21 at 18:55

Alexander Nied

12,804
4
25
45

1

This would be more pragmatic as `let requests = $(data).map((index, item) => $.ajax(...));` – Andy Ray Dec 15 '21 at 18:56
@AndyRay -- good point-- this can definitely be written to be more succinct. – Alexander Nied Dec 15 '21 at 18:57
2

This is a duplicate many many times over. Please refrain from answering them. – Heretic Monkey Dec 15 '21 at 18:57

Wait for all Ajax request in each-loop

1 Answers1