如何添加使用 jquery .load() 插入的值

Question

我有一些使用 jquery .load 插入的值。我想将这些值加在一起并将结果显示在 div （或 span 或其他）中。这是我用来插入值的代码（数字，但只是纯文本）：

结束正文标签上方：我有：

$( "#result1" ).load( "mypage.php?f=15 .threadcount" );
$( "#result2" ).load( "mypage.php?f=16 .threadcount" );
$( "#result3" ).load( "mypage.php?f=25 .threadcount" );
$( "#result4" ).load( "mypage.php?f=18 .threadcount" );    

并在页面上方显示这些值：

<div id="result1"></div>, <div id="result2"></div>... etc.

将它们加在一起并显示我尝试使用this answer to "Add values together using jquery"的总数

但这给了我“$NaN”作为我的总价值。我假设是因为它在求和的同时加载该值？或者它无法将 frm .load 中的那段文本识别为数字？

我还尝试更改 this answer to "Dynamically adding the sum of field in Jquery" 答案中使用的代码，该代码在输入表单输入时添加值，但我也没有得到任何结果。

非常感谢您提供的任何建议。

Answer 1

所有.load() 操作都是异步的。这意味着它们将在未来的某个时间完成。您将不得不等到它们全部完成，直到您可以正确计算您的总和。我将添加一些示例代码来说明如何做到这一点。

var cnt = 0;
function done() {
    --cnt;
    if (cnt <= 0) {
        // all requests done now
        // put code here to calculate your sum
    }
}

cnt = 4;
$( "#result1" ).load( "mypage.php?f=15 .threadcount" , done);
$( "#result2" ).load( "mypage.php?f=16 .threadcount" , done);
$( "#result3" ).load( "mypage.php?f=25 .threadcount" , done);
$( "#result4" ).load( "mypage.php?f=18 .threadcount" , done);

---

或者，使用 jQuery 承诺的版本：

function loadResult(target, query) {
    var def = $.Deferred();
    $("#result" + target).load("mypage.php?f=" + query + " .threadcount", function() {
        def.resolve();
    });
    return def.promise();
}

$.when(loadResult(1,15), loadResult(2,16), loadResult(3,25), loadResult(4,18)).then(function() {
    // calculate the result here
});

Answer 2

您可以使用延迟对象来完成此操作，如下所示：

var 
d1 = $.get( "mypage.php?f=15", function(data) { $("#result1").html( $(data).find(".threadcount") ); }),
d2 = $.get( "mypage.php?f=16", function(data) { $("#result2").html( $(data).find(".threadcount") ); }),
d3 = $.get( "mypage.php?f=25", function(data) { $("#result3").html( $(data).find(".threadcount") ); }),
d4 = $.get( "mypage.php?f=18", function(data) { $("#result4").html( $(data).find(".threadcount") ); });

$.when( d1, d2, d3, d4 ).then( function() {
    var sum = +$('#result1').text() + $('#result2').text() + $('#result3').text() + $('#result4').text();
});