javascript – 从成功函数中“追加”Ajax结果“直播”

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

解决方法

尝试

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