等待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

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

Answer 2

您应该创建一个延迟对象链。

每个ajax调用返回延迟对象，然后您可以将它们收集到jQuery.when函数中，并在所有ajax调用解决了它们在jQuery.then函数中的承诺后调用最后一个函数。

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