如何对两个Ajax调用的结果执行计算？

Question

我有一个包含两个文本字段的页面。当用户更改任何一个的值时，我发送两个ajax请求，一个用于每个字段的值，然后对这两个结果执行计算。

然而，因为他们是异步没有办法知道什么时候他们已经完成了，我不能运行任何一个回调函数的计算，因为另外一个可能不会在该点结束。

目前我声明了两个全局变量，要求从第一回调的第二个请求，并计算结果在第二个回调。

这似乎是非常糟糕的做法，尤其是看到因为它们都查询相同的API - 没有理由有两次写的代码。 我如何重构我的代码以改善此问题？

Answer 1

只是想补充一点，Deferred可以帮助在这里：

var responses = []; 

$.when(
    $.get("url1", function(response) { 
     responses[0] = response; 
    }), 

    $.get("url2"), function(response) { 
     responses[1] = response; 
    }) 
).then(// will run when both are completed 
    function() { 
     alert(responses); 
    } 
); 

Answer 2

使用此代码段，你必须定义函数只有一次，使用一个公共职能。

function handleDualRequest(response){ 
    if(!handleDualRequest.lastResponse){ //If a last response doesn't exist, return; 
     handleDualRequest.lastResponse = response; 
     return; 
    } 
    var lastResponse = handleDualRequest.lastResponse; 
    //Else: Two response texts, continue 
    // Available response strings: 
    response; 
    lastResponse; 

    //Finished function, reset variable: 
    handleDualResponse.lastResponse = ""; 
} 

如果您有支持多个双调用，您可以添加第二个参数，并存储在数组中handleDualResponse.lastResponse最后的响应。

Answer 3

有两个变量来表示，如果在通话结束后，调用阿贾克斯之前他们设置为false。每个ajax回调函数都将其中一个变量设置为true，然后调用检查这两个变量的通用函数。如果它们都是真的，它将执行计算。

Answer 4

同时拥有成功处理程序调用同一个函数来处理响应。如果我们已收到有关这两种响应该功能只能继续：

(function() { 
    var response1 = null; 
    var response2 = null; 
    $.get("/url1", function(response) { 
     response1 = response; 
     processResponses(); 
    }); 
    $.get("/url2", function(response) { 
     response2 = response; 
     processResponses(); 
    }); 
    function processResponses() { 
     if (response1 && response2) { 
      // do something 
     } 
    } 
})(); 

但如果是我的话，我只是修改我的服务器代码，使一个请求是一切必要。