jQuery。每個$ post發送值到外部變量不工作

Question

我試圖使用.each添加數據，每次它循環到abilitiesExtra，但目前它似乎並沒有工作和我無法弄清楚爲什麼。

在哪裏，我認爲它會錯莫名其妙：

var abilitiesExtra = (0 * 1); 
     $(".iconDiv").each(function() { 
      if ($(this).is(":empty") === false) { 
       //alert("Hello"); 
       var ability = $(this).children("img").first().attr("class"); 
       $.post('PHP/getAbilityCost.php', { 
        ability: ability 
       }, function (dataTwo) { 
        abilitiesExtra = (dataTwo * 1) + abilitiesExtra; 
       }); 
      } 
     }); 
     alert(abilitiesExtra); 

周圍代碼：

if (oneIsEmpty === "false") { 
     var abilitiesCost = (0 * 1); 
     var attack = $("#attack").val(); 
     var speed = $("#speed").val(); 
     var minRng = $("#minRng").val(); 
     var maxRng = $("#maxRng").val(); 
     var defense = $("#defense").val(); 
     var hitPoints = $("#hitPoints").val(); 
     var size = $("#size").val(); 
     $.post('PHP/getNoraCost.php', { 
      attack: attack 
      , speed: speed 
      , minRng: minRng 
      , maxRng: maxRng 
      , defense: defense 
      , hitPoints: hitPoints 
      , size: size 
     }, function (data) { 
      abilitiesCost = (data * 1) + abilitiesCost; 
     }); 
     var abilitiesExtra = (0 * 1); 
     $(".iconDiv").each(function() { 
      if ($(this).is(":empty") === false) { 
       var ability = $(this).children("img").first().attr("class"); 
       $.post('PHP/getAbilityCost.php', { 
        ability: ability 
       }, function (dataTwo) { 
        abilitiesExtra = (dataTwo * 1) + abilitiesExtra; 
        console.log(abilitiesExtra); //gives the right number 
       }); 
      } 
     }); 
     //alert(abilitiesExtra) is always 0 now 
     abilitiesCost = abilitiesExtra + abilitiesCost; 
     $("#totalNoraCostD p").empty(); 
     $("#totalNoraCostD p").append(abilitiesCost); 
    } 

Answer 1

Ajax調用是異步的。當你撥打$.post()時，它只是發送ajax請求。呼叫$.post()之後的線路會立即執行。稍後，當ajax調用返回時，執行回調函數。

$.post()函數返回一個jqXHR對象，它是一個Deferred對象。您可以將所有jqXHR對象放入數組中，然後使用$.when()在最後一次ajax調用返回時執行回調。

if (!oneIsEmpty) { 
    var abilitiesCost = 0; 
    var abilitiesExtra = 0; 

    var costJqXhr = $.post('PHP/getNoraCost.php', { 
     attack: $("#attack").val(), 
     speed: $("#speed").val(), 
     minRng: $("#minRng").val(), 
     maxRng: $("#maxRng").val(), 
     defense: $("#defense").val(), 
     hitPoints: $("#hitPoints").val(), 
     size: $("#size").val() 
    }, function(data) { 
     abilitiesCost += (data * 1); 
    }); 

    // This makes the ajax calls, creating an array of the jqXhr objects. 
    var jqXhrs = $(".iconDiv:not(:empty)").map(function() { 
     return $.post('PHP/getAbilityCost.php', { 
      ability: $(this).children("img:first").attr("class") 
     }, function(dataTwo) { 
      abilitiesExtra += (dataTwo * 1); 
     }); 
    }); 

    jqXhrs.push(costJqXhr); 

    // This executes the callback when the last ajax call has returned. 
    $.when.apply($, jqXhrs).then(function() { 
     $("#totalNoraCostD p").html(abilitiesCost + abilitiesExtra); 
    }); 
} 

jsfiddle