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