javascript - JQuery:更新表内容花费太长时间

Question

我使用 JQuery Ajax 从服务器获取表的内容，使用如下代码:

success: function(data)
{
    //once I get the data, remove the old content from table
    $('.tableBody').empty();

    // then repopulate the table
    $.each(data, function(key,val) {
        //process the data, add different icons, texts...,append it to my table
        showTable(key, val);
   });
}

这很好用。但问题是表有很多行，所以重新填充大约需要 300 毫秒，(empty() 只需要大约 10 毫秒)，所以有一瞬间，表是空白的。

我是否可以在 "empty()" 和 "showTable()" 之间添加一些动画以避免出现空白屏幕，从而实现无缝过渡？

Answer 1

如果showTable()正在做的是“处理数据，添加不同的图标，文本......，将其附加到[您的]表格”，那么它可能看起来像这样:

$.each(data, function(key, val){
    $('.tableBody').append(key +' - '+ val);
});

您首先应该知道的是，将 HTML 尽可能长时间地保留在字符串中，然后将其放入 jQuery 对象并将其附加到 DOM，而不是创建要附加到的多个 jQuery 对象，这样会更快DOM 也多次。 所以你最好这样做:

var tableContents = '';
$.each(data, function(key,val){
    tableContents += key +' - '+ val; // generate whatever HTML you need
});
$('.tableBody').append(tableContents);

它允许您在重新填充表之前清空表:

var tableContents = '';
$.each(data, function(key,val){
    tableContents += key +' - '+ val; // generate whatever HTML you need
});
$('.tableBody')
    .empty()
    .append(tableContents);