4

问题：为什么我的 AJAX 成功函数附加到 DOM 的元素直到成功函数返回后才会出现？

上下文：我正在使用 AJAX 获取一个 JSON 对象，其中包含大约 6000 个内部对象，我想用这些对象来填充表。不幸的是，创建表格大约需要 10 秒，所以我想在加载时给用户一些视觉反馈。我认为用户将能够在我调用时看到“实时”表行，append但在成功返回之前它们不会加载。当这不起作用时，我尝试更新 Bootstrap 进度条的宽度，但进度条在处理过程中只是冻结。

目标： 我希望用户看到附加的表格行或正确更新的进度条。

代码：

AJAX 调用：

$.ajax({
        type: "GET",
        url: myUrl,
        contentType: "application/json; charset=UTF-8",
        dataType: "json",
        success: function(results){
            for(var i in results) {
                $("#bar").css("width", s / results.length + "%");
                console.log(i);
                var t_cell = $('<td class="'+attrs[i]+'">');
                t_cell.css("background-color", results[i]["val0"]);
                t_cell.append($("<span class='val'>").text(results[i]["val1"]));
                t_cell.append($("<span class='raw'>").text(results[i]["val2"]]));
                t_row.append(t_cell);
                $("#review_table > tbody").append(t_row);
            }
            $('#progress').hide();
        }
    });

HTML：

<div id="progress" class="progress progress-striped active">
  <div id="bar" class="bar" style="width: 1%;"></div>
</div>
<div id='review_div'>
    <table class='table table-condensed' id='review_table'>
        <thead></thead>
        <tbody></tbody>
    </table>
</div>
4

3 回答 3

1

尝试

$.ajax({
    type : "GET",
    url : myUrl,
    contentType : "application/json; charset=UTF-8",
    dataType : "json",
    success : function(results) {

        var i = 0;

        function process() {
            while (i < results.length) {

                console.log(results[i])
                $("#bar").css("width", s / results.length + "%");
                console.log(i);
                var t_cell = $('<td class="' + attrs[i] + '">');
                t_cell.css("background-color", results[i]["val0"]);
                t_cell.append($("<span class='val'>").text(results[i]["val1"]));
                t_cell.append($("<span class='raw'>").text(results[i]["val2"]));
                t_row.append(t_cell);
                $("#review_table > tbody").append(t_row);

                i++;
                if (i % 25 == 0) {
                    setTimeout(process, 0);
                    break;
                }
            }
        }
        process();

        $('#progress').hide();
    }
});
于 2013-06-05T03:14:50.487 回答
0

与其将其视为分页，您实际上可以编写一个循环，以较小的块获取记录；也许一次尝试 100 条记录。当您将 100 条记录附加到 DOM 时，您的循环会一直在后台获取和附加。您必须小心地将它们保持在您想要的顺序，因为不能保证数据将按请求的顺序返回。我可能会尝试使用 .after() 以正确的顺序附加数据。通过一些修补，我认为这可以产生干净高效的用户体验。

于 2013-06-05T00:22:54.510 回答
0

你可以尝试这样的事情：

for(var i in results) {
    createRow(i);
}

和

function createRow(i){
    var t_cell = $('<td class="'+attrs[i]+'">');
    t_cell.css("background-color", results[i]["val0"]);
    t_cell.append($("<span class='val'>").text(results[i]["val1"]));
    t_cell.append($("<span class='raw'>").text(results[i]["val2"]]));
    t_row.append(t_cell);
    $("#review_table > tbody").append(t_row);
}

但是，我真的不认为您应该在一个表中呈现 6000 行。尝试使用库对表格进行分页。DataTables 有一节专门介绍如何对 Bootstrap 表进行分页。

http://www.datatables.net/blog/Twitter_Bootstrap

于 2013-06-04T23:12:00.937 回答