Question

我正在执行两个单独的AJAX调用，我最终希望结果是一个我可以操作的数字变量的形式。我已经将函数的执行包装在$（function（）中，试图等到两个AJAX函数都返回了它们的值，以便在返回结果之前不开始进行数学计算，但似乎不是工作。

如何在函数操作结果之前确保从两个单独的AJAX调用返回结果？

// 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

我建议您使用jQuery Deferred和Promises，如下所示

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

您可以使用$.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!");
});

操纵多个AJAX调用的结果

2 个答案: