javascript - 从成功函数追加 Ajax 结果 "live"

Question

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

上下文:我正在使用 AJAX 获取一个包含大约 6000 个内部对象的 JSON 对象，我想使用这些对象来填充表格。不幸的是，创建表格大约需要 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();
    }
});