单击按钮时,我使用 codeigniter 从数据库中获取数据,并将获取的数据附加到一个 div 中。问题是虽然数据量很大,但需要时间并且网页滞后。我应该怎么做才能解决这个问题?
我的代码如下。
$("#get_spare_list").click(function() {
$("body").css("cursor", "progress");
var ht = "";
$.ajax({
url: "<?php echo base_url('Spare/get_all_spare_json'); ?>",
type: 'POST',
dataType: 'json',
data: {"param1": 'value1'},
})
.done(function(data) {
var no = 1;
var ht = "<table class='table'><thead><tr><th>No</th><th>Name</th><th>Code</th><th>Min qty</th><th>uni</th><th>Group</th><th>Sub Category</th><th>Part Number</th><th>Location</th><th>Image</th><th >Tyre</th><th>Back</th></tr></thead>";
$.each(data, function(key, val) {
ht +="<tr>"+"<td>"+no+"</td>"+"<td>"+val.name+"</td>"+"<td>"+val.code+"</td>"+"<td>"+val.min_qty+"</td>"+"<td>"+val.unit+"</td>"+"<td>"+val.group+"</td><td>"+val.sub_category+"</td><td>"+val.part_number+"</td><td>"+val.location+"</td>";
if (val.image) {
ht += "<td><a target='_blank' href='"+"<?php echo base_url('../uploads/'); ?>/"+val.image+"'><button class='fa fa-picture-o'></button></a></td>";
}else{
ht += "<td></td>";
}
ht +="<td>"+val.tyre+"</td>";
ht += "<td>";
if (val.reusable == 1) {
ht +="yes";
}else{
ht+="no";
};
ht += "</td>";
ht += "<td><button class='btn edit btn-info btn-xs' data-toggle='modal' data-target='#editModel' data-id='"+val.id+"' data-name='"+val.name+"' data-code='"+val.code+"' data-min_qty='"+val.min_qty+"' data-unit='"+val.unit+"' data-group='"+val.group+"' data-sub_category='"+val.sub_category+"' data-part_number='"+val.part_number+"' data-location='"+val.location+"' data-tyre_number='"+val.tyre+"' data-back='"+val.reusable+"'><span class='fa fa-edit'></span></button></td>";
ht += "</tr>";
no++;
});
$("#js_res").append(ht);
$("body").css("cursor", "default");
})
.fail(function() {
alert("error");
$("body").css("cursor", "default");
});
});
jQuery 应该顺利地将数据附加到 div 中,而不会出现网页滞后和挂起。
最佳答案
当浏览器收到响应时,传递给 .done()
的回调函数被添加到 JavaScript 的事件循环队列中。
在处理数据时,它会阻止 JavaScript 的事件循环来处理进一步的任务。同时,甚至像处理鼠标输入这样的事情也被阻止了。如果正在处理的数据太大,最终用户会更容易观察到这一点。
您可以将检索到的数据分成 block ,然后通过对它们调用 setTimeout()
将它们分别推送到事件循环。来源:Cooperation part of You Don't Know JS: Async & Performance
下面是它如何适用于您的代码,传递给 .done()
的回调函数和辅助函数:
function(data) {
var ht = "<table class='table'><thead><tr><th>No</th><th>Name</th><th>Code</th><th>Min qty</th><th>uni</th><th>Group</th><th>Sub Category</th><th>Part Number</th><th>Location</th><th>Image</th><th >Tyre</th><th>Back</th></tr></thead>";
$("#js_res").append(ht);
processData(data, 1);
$("body").css("cursor", "default");
}
function processData(data, no) {
var chunk = data.splice(0, 100);
var ht = "";
$.each(chunk, function(key, val) {
ht +="<tr>"+"<td>"+no+"</td>"+"<td>"+val.name+"</td>"+"<td>"+val.code+"</td>"+"<td>"+val.min_qty+"</td>"+"<td>"+val.unit+"</td>"+"<td>"+val.group+"</td><td>"+val.sub_category+"</td><td>"+val.part_number+"</td><td>"+val.location+"</td>";
if (val.image) {
ht += "<td><a target='_blank' href='"+"<?php echo base_url('../uploads/'); ?>/"+val.image+"'><button class='fa fa-picture-o'></button></a></td>";
}else{
ht += "<td></td>";
}
ht +="<td>"+val.tyre+"</td>";
ht += "<td>";
if (val.reusable == 1) {
ht +="yes";
}else{
ht+="no";
};
ht += "</td>";
ht += "<td><button class='btn edit btn-info btn-xs' data-toggle='modal' data-target='#editModel' data-id='"+val.id+"' data-name='"+val.name+"' data-code='"+val.code+"' data-min_qty='"+val.min_qty+"' data-unit='"+val.unit+"' data-group='"+val.group+"' data-sub_category='"+val.sub_category+"' data-part_number='"+val.part_number+"' data-location='"+val.location+"' data-tyre_number='"+val.tyre+"' data-back='"+val.reusable+"'><span class='fa fa-edit'></span></button></td>";
ht += "</tr>";
no++;
});
$("#js_res").append(ht);
if (data.length > 0) {
setTimeout(function(){
processData(data, no);
}, 0);
}
}
关于javascript - 平滑扩展 Div 不滞后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54235086/