等待AJAX​​调用链完成

Question

我有一个函数调用其他具有AJAX请求的函数。我希望在调用最后一个函数之前完成所有AJAX调用。我初始化一个数组，并且在进入最后一步之前需要成功完成所有AJAX调用。当我在浏览器中运行代码时，控制台显示在第一个AJAX调用完成之前调用的最后一个方法。我尝试使用.done，但我仍然得到相同的结果。

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需要在每个函数中完成所有AJAX调用。

Answer 1

您应该创建一个deferred objects链。

每个ajax调用返回Deferred对象，然后你可以在jQuery.when函数中收集它们，并在所有ajax调用在 jQuery.then 函数中解析它们的promise后调用最后一个函数。

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

Answer 2

让所有函数在完成后调用DisplayMatches并检查userIDs数组是否完整...当它知道所有函数都已完成所以你只需运行它，如果不是，退出