如何對兩個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 
     } 
    } 
})(); 

但如果是我的話，我只是修改我的服務器代碼，使一個請求是一切必要。