处理多个AJAX调用的结果

Question

I'm performing two separate AJAX calls and I'd ultimately like for the results to be in the form of a number variable that I can manipulate. I've wrapped the execution of the functions within $(function() in an attempt to wait until both of the AJAX functions have returned their value so as not to begin to do the math before the results are returned, but it appears that's not working.

How can I ensure that the results are returned from two separate AJAX calls before the function manipulates their results?

 // Collect Data Point P function myCallbackP(result) { var p = Math.round(result/3); $('#past').html(p); } fooP(myCallbackP); function fooP (callback){ $.ajax({ url: 'https://' + company + '.teamwork.com/' + actionP, headers: {"Authorization": "BASIC " + window.btoa(key)}, }).done(function(response){ callback((response['todo-items']).length); }) } //Collect Data Point F function myCallbackF(result) { var f = (result); $('#future').html(f); } fooF(myCallbackF); function fooF (callback){ $.ajax({ url: 'https://' + company + '.teamwork.com/' + actionF, headers: {"Authorization": "BASIC " + window.btoa(key)}, }).done(function(response){ callback((response['todo-items']).length); }) } //Math up data point P and F $(function() { var v = myCallbackP(); var y =myCallbackP; var z = v/y; console.log(z); $('#ratio').html(z); console.log('success?'); console.log( "ready!" ); }); 

Answer 1

I suggest you use jQuery Deferred and Promises like below

 var ajax1 = fooP(); function fooP() { var defObj = $.Deferred(); $.ajax({ url: 'https://' + company + '.teamwork.com/' + actionP, headers: { "Authorization": "BASIC " + window.btoa(key) }, }).done(function(response) { defObj.resolve(response); }); return defObj.promise(); } var ajax2 = fooF(); function fooF() { var defObj = $.Deferred(); $.ajax({ url: 'https://' + company + '.teamwork.com/' + actionF, headers: { "Authorization": "BASIC " + window.btoa(key) }, }).done(function(response) { defObj.resolve(response); }); return defObj.promise(); } // when both calls are done $.when(ajax1, ajax2).done(function(data1, data2) { var p = Math.round(data1 / 3); $('#past').html(p); var f = (data2); $('#future').html(f); var z = p / f; console.log(z); $('#ratio').html(z); console.log('success?'); console.log("ready!"); }); 

Answer 2

You can use $.when()

// Collect Data Point P
function myCallbackP(result) {
  var p = Math.round(result / 3);
  $('#past').html(p);
}

function fooP(callback) {
  return $.ajax({
    url: 'https://' + company + '.teamwork.com/' + actionP,
    headers: {
      "Authorization": "BASIC " + window.btoa(key)
    }
  })
}

//Collect Data Point F
function myCallbackF(result) {
  var f = (result);
  $('#future').html(f);
}

function fooF(callback) {
  return $.ajax({
    url: 'https://' + company + '.teamwork.com/' + actionF,
    headers: {
      "Authorization": "BASIC " + window.btoa(key)
    }
  })
}

//Math up data point P and F
$(function() {
  $.when(fooP(), fooF())
  .then(function(p, f) {
    console.log('success?');
    myCallbackP(p[0]["todo-items"].length);
    myCallbackF(f[0]["todo-items"].length);
     var v = +$("#past").html();
     var y = +$("#future").html();
     var z = v / y;
     console.log(z);
    $('#ratio').html(z);
  })
  .fail(function(jqxhr, textStatus, errorThrown) {
     console.log(errorThrown);
  });

  console.log("ready!");
});