0

我有以下 HTML 代码：

<table class="viewTable">
  <tr>
    <td>Price</td>
  </tr>
</table>

我想使用Javascript动态插入数据，如下所示：

var totalPrice = 0;
map.each(function(key , value , i) {
    params = {};
    params.id = key;
    // get datas from Controller class via ajax 
    ajax(url, params, false, function(result) {
        totalPrice += setData(result , key , value);
    });
});
// alert("something!"); // this may satisfy my problem.. I have no idea..
// Total Price shown on last row
$('table.viewTable tr:last').after("<tr class='title_bar'><td colspan='5' style='text-align: right;padding-right: 35px;'>"+num2Currency(totalPrice)+"</td></tr>");

setData功能是：

function setData(result , partsId , count) {
var price = result.price;
html = [];
html.push("<tr>");
html.push("<td><div>"+price+"</div></td>"); 
html.push("</tr>");
$('table.viewTable').append(html.join(''));
return price;}

我使用了 Jade 对这个问题的回答中的 map 函数：Map in JavaScript。

我的问题是结果的显示或程序本身不正确。它应该先插入价格行，然后再插入总价格行；相反，顺序是相反的，totalPrice 首先出现，然后是价格行。当我在插入 totalPrice 之前插入警告语句时，它工作正常。有什么建议么？我的代码有什么问题？jQuery是异步编译的吗？

4

2 回答 2

2

杰普。Ajax 调用是异步的，这意味着它们不会立即执行。您将需要跟踪已完成的 ajax 调用的数量，当所有调用都完成后，您可以追加总数。

像这样的东西：

var totalPrice = 0;
var completedAjaxCalls = 0;
map.each(function(key , value , i) {
    params = {};
    params.id = key;
    // get datas from Controller class via ajax 
    ajax(url, params, false, function(result) {
        totalPrice += setData(result , key , value);
        completedAjaxCalls += 1;
        if(completedAjaxCalls == map.length) {
            $('table.viewTable tr:last').after("<tr class='title_bar'><td colspan='5' style='text-align: right;padding-right: 35px;'>"+num2Currency(totalPrice)+"</td></tr>"); 
        }
    });
});

编辑：可能有更好的方法来实现这一点，但由于您仍然需要掌握异步方法的概念，我认为这里采用简单的方法是合适的。

于 2013-08-07T06:07:41.250 回答
1

你需要尝试

var totalPrice = 0;
var requests = [];
map.each(function(key, value, i) {
    params = {};
    params.id = key;
    // get datas from Controller class via ajax
    // make sure that `ajax()` return the promise returned by $.ajax()
    requests.push(ajax(url, params, false, function(result) {
        totalPrice += setData(result, key, value);
    }));
});
$.when.apply($, requests).done(function() {
    // alert("something!"); // this may satisfy my problem.. I have no idea..
    // Total Price show at last row
    $('table.viewTable tr:last')
    .after("<tr class='title_bar'><td colspan='5' style='text-align: right;padding-right: 35px;'>"
           + num2Currency(totalPrice) + "</td></tr>");
})
于 2013-08-07T06:07:58.997 回答