Wait for chain of AJAX calls to complete

Question

I have a function that calls other functions which have AJAX requests. I want all of the AJAX calls to complete before calling the last function. I initialize an array and need all of the AJAX calls to have successfully completed before going to the last step. When I run the code in the browser the console is showing the last method being called before the first AJAX call is completed. I've tried using .done however I'm still getting the same result.

function Search() {
       var userIds = [];
       var certName = $('#certificationName').val();
       var skillNumberOne = $('#skillName1').val();
       var skillNumberTwo = $('#skillName2').val();
       var skillNumberThree = $('#skillName3').val();
       var locale = $('#location').val();
       CertMatchResults(certName, userIds);
       SkillMatchResults(skillNumberOne, userIds);
       SkillMatchResults(skillNumberTwo, userIds);
       SkillMatchResults(skillNumberThree, userIds);
       LocationMatchResults(locale, userIds);
       console.log(userIds);
       DisplayMatches(userIds);
    }

    function CertMatchResults(certName, userIds) {
       if (certName == '') return;
       $.getJSON('json_data.php', { method: 'matchCerts', certName: certName }, function(data) {
          $.each(data, function(key, value) {
             console.log("Cert Match >>> " + value.user_id);
             userIds.push(value.user_id);
          });
       }).done(function() {
          console.log("Cert match completed.");
       });
    }

    function SkillMatchResults(skillName, userIds) {
       if (skillName == '') return;
       $.getJSON('json_data.php', { method: 'matchSkill', skillName: skillName }, function(data) {
          $.each(data, function(key, value) {
             console.log("Skill Match >>> " + value.user_id);
             userIds.push(value.user_id);
          });
       });
    }
... other calls below ... I can add them if needed

DisplayMatches needs all of the AJAX calls in each of the functions before it to complete.

[Promise.all](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)? — ray, Sep 23 '15 at 15:32
I think it's a duplicate of this question: http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done — IlGala, Sep 23 '15 at 15:34

Alex Barkun · Answer 1 · 2018-06-11T13:37:06.113

2

You should create a chain of deferred objects.

Each ajax call returns Deferred object and then you can gather them in jQuery.when function and invoke the last function once all the ajax calls resolved their promises in jQuery.then function.

$.when( $.getJson("url1"), $.getJson("url2") ).then(function( valueFromUrl1, valueFromUrl2 ) {
  functionThatShouldBeInvokedLast();
});

edited Jun 11 '18 at 13:37

answered Sep 23 '15 at 15:33

Alex Barkun

503
6
13

score 1 · Accepted Answer · answered Sep 23 '15 at 15:31

1

Have all functions call the DisplayMatches when they are done and check the userIDs array if it is complete ... and when it is you know all is done so you just run it, if not, exit

answered Sep 23 '15 at 15:31

Asons

84,923
12
110
165

Wait for chain of AJAX calls to complete

2 Answers2