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 () {
    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
        }
    }
})();

但如果是我，我只是修改我的服务器代码，以便只需要一个请求。

Answer 3

使用此代码段，您只需使用一个公共函数定义该函数一次。

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 4

有两个变量来指示调用是否完成，在调用Ajax之前将它们设置为false。每个ajax回调都将其中一个变量设置为true，然后调用一个检查这两个变量的公共函数。如果它们都是真的，则执行计算。

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

4 个答案: