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

jQuery .each用$ post向外部var发送值不起作用

1 个答案: