问题:为什么从AJAX成功函数附加到DOM的元素直到成功函数返回后才出现?
Context:我使用AJAX来获取一个JSON对象,其中包含大约6000个内部对象,我想用它来填充一个表。不幸的是,它需要大约10秒来创建表,所以我想给用户一些视觉反馈,而它加载。我认为用户将能够看到表行"活",因为我叫append
,但他们不加载,直到成功返回。当这不起作用时,我尝试更新引导进度条的宽度,但进度条只是在处理过程中冻结。
目标:我希望用户看到表的行,因为他们被追加或进度条在更新正确。
代码:
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>
Try
$.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();
}
});
你可以尝试这样做:
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行。尝试使用库对表进行分页。datatable中有一节介绍了如何对Bootstrap表进行分页。
http://www.datatables.net/blog/Twitter_Bootstrap与其将其视为分页,不如实际编写一个循环,以较小的块获取记录;也许可以一次记录100条。当您将100条记录追加到DOM时,您的循环会在后台继续获取和追加。您必须小心地按照您希望的顺序保存它们,因为不能保证数据将按照请求的顺序返回。我可能会尝试使用.after()以正确的顺序附加数据。我认为只要稍加修改,就能产生干净高效的用户体验。