Wie kann ich Callback ausführen, nachdem mehrere Ajax-Anforderungen abgeschlossen sind?

Question

Ich versuche, einen Rückruf nach mehreren jQuery Ajax haben abgeschlossen.
In meinem Code rufen beide Ajax-Anfragen eine andere Funktion und wenn ich versuche, diese Funktionen zu verwenden, bekomme ich undefined.
Ich denke, das Problem hat mit verzögerten/Versprechen zu tun, aber ich weiß nicht, wie man sie verwendet.

Hier ist mein Code:

<link rel="stylesheet" type="text/css" href="https://tag/sites/ocean1/maker/captions/shared%20documents/Web_ComplianceCSS.txt"> 
<div id = "cabbage" style="font-size:10px"> 
    <p>Web Compliance Stats</p> 
</div> 
<script type = "text/javascript"> 
    var WebComplianceReportApp = {} || WebComplianceReportApp; 
    WebComplianceReportApp.GetStatuses = (function() { 
    var pub = {}, 
     _userId, 
     _ultimateObjectHolderArr = [], 
     _items = [], 
     _options = { 
     listName: "M_Web_Compliance", 
     container: "#cabbage", 
     }; 
    pub.init = function() { 
     var clientContext = new SP.ClientContext.get_current(); 
     _userId = clientContext.get_web().get_currentUser(); 
     clientContext.load(_userId); 
     clientContext.executeQueryAsync(getUserInfo, _onQueryFailed); 
    }; 

    function getUserInfo() { 
     _userId = _userId.get_id(); 
     getSpecifiedList(_options.listName, _userId); 
    } 

    function buildObject(results, listName) { 
     _items = results.d.results; 
     $.each(_items, function(index, item) { 
     _ultimateObjectHolderArr.push({ 
      "Division": item.ParentOrg, 
      "ORG": item.ORG, 
      "URL": item.URL, 
      "Status": item.Site_Status 
     }); 
     }); 
     //createStatusView2(_ultimateObjectHolderArr); 
    } 

    function getSpecifiedList(listName, userId) { 
     var counter = 0; 
     var baseUrl = SP.PageContextInfo.get_webServerRelativeUrl() + "/_vti_bin/listdata.svc/" + listName; 
     var url1 = baseUrl + "?$select=ParentOrg,ORG,URL,Site_Status&$inlinecount=allpages"; 
     var call1 = $.ajax({ 
     url: url1, 
     type: "GET", 
     headers: { 
      "accept": "application/json;odata=verbose", 
     } 
     }).done(function(results) { 
     buildObject(results, listName); 
     }).fail(function(error) { 
     console.log("Error in getting List: " + listName); 
     $(_options.container).html("Error retrieving your " + listName + ". " + SP.PageContextInfo.get_webServerRelativeUrl()); 
     }); 
     var url2 = baseUrl + "?$select=ParentOrg,ORG,URL,Site_Status&$inlinecount=allpages&$skiptoken=1000"; 
     var call2 = $.ajax({ 
     url: url2, 
     type: "GET", 
     headers: { 
      "accept": "application/json;odata=verbose", 
     } 
     }).done(function(results) { 
     buildObject(results, listName); 
     }).fail(function(error) { 
     console.log("Error in getting List: " + listName); 
     $(_options.container).html("Error retrieving your " + listName + ". " + SP.PageContextInfo.get_webServerRelativeUrl()); 
     }); 
    } 

    function createStatusView2(Arr) { 
     var divisionArr = []; 
     var oRGArr = []; 
     var divisionCount = 0; 
     var oRGCount = 0; 
     for (var i = 0; i < Arr.length; i++) { 
      if ($.inArray(Arr[i].Division, divisionArr) === -1) { 
      divisionArr.push(Arr[i].Division); 
      var divisionHolderElement = $("<div id='p_" + Arr[i].Division + "' class='division_row_holder'></div>"); 
      var divisionElement = $("<div id='" + Arr[i].Division + "' class='division_div ORG'></div>").text(Arr[i].Division); 
      $("#cabbage").append(divisionHolderElement); 
      $(divisionHolderElement).append(divisionElement); 
      } 
      if ($.inArray(Arr[i].ORG, oRGArr) === -1) { 
      oRGArr.push(Arr[i].ORG); 
      var orgElement = $("<div class='org_div ORG' id='" + Arr[i].ORG + "' style='font-size:10px;'></div>").text(Arr[i].ORG); 
      $("#p_" + Arr[i].Division).append(orgElement); 
      } 
     } 
     } 
    //automatically fired by init 
    function _onQueryFailed(sender, args) { 
     alert('Request failed.\nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace()); 
    } 
    return pub 
    }()); 
    $(document).ready(function() { 
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() { 
     //After the SP scripts are run, we access the WebComplianceReportApp.GetStatuses 
     WebComplianceReportApp.GetStatuses.init(); 
    }); 
    }); 
</script> 

Answer 1

Sie createStatusView(); nennen könnte und dann createStatusView2(); nach alle Ihre Ajax-Anfragen

$(document).ready(function(){ 
    createStatusView(); 
    $(this).ajaxStop(function() { 
    // NOTE: I did not see you use createStatusView(); in your code 
    createStatusView2(); 
    }); 
}); 

Answer 2

Methode eins getan werden rufen:

wir dieses Mal Ich habe auf die Anfrage komplett gewartet statt auf das Request warten st

$(".ajax-form-button-thingy").on("click", function() { 
    $.ajax({ 
    url: $(this).attr("href"), 
    type: 'GET', 
    error: function() { 
     throw new Error("Oh no, something went wrong :("); 
    }, 
    complete: function(response) { 
     $(".ajax-form-response-place").html(response); 
    } 
    }); 
}); 

Methode zwei Erfolg:

Wenn Sie ALLE Ajax-Anfragen ohne Änderung der async Option false abzuschließen warten wollen, dann werden Sie möglicherweise für jQuery.ajaxComplete();

suchen In jQuery wird jedes Mal, wenn eine Ajax-Anforderung abgeschlossen ist, das Ereignis jQuery.ajaxComplete(); ausgelöst.

Hier ist ein einfaches Beispiel, aber es gibt mehr Informationen über jQuery.ajaxComplete(); über here.

$(document).ajaxComplete(function(event, request, settings) { 
    $(".message").html("<div class='alert alert-info'>Request Complete.</div>"); 
}); 

Sie können auch einen Blick auf die Antwort Ajax nehmen von request.responseText mit diesem in Fall nützlich sein könnten Sie die Antwort überprüfen verdoppeln wollen.

Weitere Informationen über jQuery.ajax können Sie die Dokumentation lesen here

Answer 3

Ich weiß nicht, ob dies Ihr Code schmutzig machen, aber ich würde eine Flagge in diesem Fall benutzen

ex:

var ajaxCalls = 0; 
function checkAjaxCalls() 
{ 
    if (ajaxCalls == 2) 
    { 
    //do your thing... 
    //and maybe you want to reset ajaxCalls value to zero if needed... 
    } 
} 

Und von jeder Ajax-Antwort abgeschlossen ist, erhöhen ajaxCalls Variable von eins, und rufen Sie die checkAjaxCalls Funktion aus beiden Ajax-Antworten.