Question

问题：为什么在成功函数返回之后才会显示从我的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>

Answer 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();
    }
});

Answer 2

您可以尝试这样的事情：

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

Answer 3

不是将它视为分页，而是实际上可以编写一个以较小的块来获取记录的循环;也许一次尝试100条记录。当您将100条记录附加到DOM时，您的循环将继续在后台获取和追加。您必须小心按照您希望的顺序保留它们，因为无法保证数据将按请求的顺序返回。我可能会尝试使用.after（）以正确的顺序附加数据。通过一些修修补补，我认为这可以产生干净，高效的用户体验。

从成功函数“实时”追加Ajax结果

3 个答案: