jQuery動的にちらつきのないテーブル行を追加します

Question

5秒ごとにjQuery ajaxを使用してサーバーから新しいデータをフェッチし、テーブルに追加します。
テーブルをちらつく原因となる1つの厄介なissue.every追加アクションを除いて、すべてが正常に動作しています。
私は物事を少し滑らかにする方法を模索しており、この行動をユーザーにとってより「目に優しい」ものにしています。
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

慣用的で高速なjQueryコードを書く方法については豊富な記事があります。お読みください。ここでは簡単にこの問題をカバーしていずれかになります。

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

は、この特定の問題のために、あなたは2つのことを実行する必要があります。

1. キャッシュあなたのtbodyルックアップは、あなたのアペンド

を組み合わせます

あなたがここで意図したことはおそらく次のとおりです。

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 2

問題は、あなたがテーブルを空にしていることです。新しい行のみを検索する必要があります。おそらくあなたはあなたの要求に "id"を渡し、後に追加されたものだけを得ることができます。

Answer 3

「loading ...」画像またはメッセージを使用することを検討してください。 see this oneこれは、より「目に優しい」ものになるでしょう