Question

我有一个页面，每5秒从jQuery ajax服务器获取新数据并将其附加到表中。
一切都工作得很好，除了一个恼人的问题。每一个附加动作导致表格闪烁。
我正在寻找一种方法来平滑一些事情，并使这个动作对用户更“眼睛友好”。
HTML：

  <table id="myTable">
     <thead>
      <tr>
       <th>COL A</th>
       <th>COL B</th>
       <th>COL C</th>                                    
      </tr>
     </thead>
     <tbody>

     </tbody>
    </table>

jQuery的：

setInterval(function () {
    $('#myTable tbody').empty();
    $.ajax({
    type: "POST",
    url: "/MySite/WebMethods/AjaxTestMethods.aspx/GetActivityTable",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
    var d = data.d;
    for (var i = 0; i < d.length; i++) {
    $('#myTable tbody').append('<tr><td>' + d[i].DATA1 + '</td><td>' + d[i].DATA2 +'</td><td>' + d[i].DATA3 + '</td><tr>'); 
     }
    }
  });
 }, 5000);

Answer 1

问题是你正在清空表。您应该只查找新行。也许你可以在你的请求中传递一个“id”，并且只获得之后添加的内容。

Answer 2

关于如何编写惯用的，快速的jQuery代码，有很多文章。请读一读。以下简要介绍了这个问题：

http://www.slideshare.net/AddyOsmani/jquery-proven-performance-tips-tricks

对于这个特殊问题，你需要做两件事：

缓存你的tbody lookup
合并您的追加

你在这里的意思可能就是：

var rows = "";
for (var i = 0; i < d.length; i++) {
    rows += '<tr><td>' + d[i].DATA1 + '</td><td>' + d[i].DATA2 +'</td><td>' + d[i].DATA3 + '</td><tr>'; 
}

$('#myTable tbody').append(rows);

分离也可能有所帮助，但考虑到你一次拥有数据，我认为它不会有多大帮助。但如果它没有足够的帮助，你也可以试试。

PS：不要忘记为HTML实体转义Ajax数据。

Answer 3

考虑使用'loading ...'图像或消息。 see this one这将使它更“眼睛友好”

jQuery动态附加表行而不闪烁

3 个答案: