AJAXをx秒間呼び出すとテーブルを更新する

Question

AJAXを作成したい呼び出しを5秒間実行し、内容の長さを確認します。長さが変更されている場合は、古いレコードを保持しない場合は、新しい項目で表を更新する必要があります。私が今問題にしているのは、テーブルは更新されますが、新しいアイテムですべてのアイテムが前から再追加されます。この問題を修正して、新しいアイテムだけがテーブル内の既存アイテムに追加されるようにするにはどうすればよいですか？

$(function(){ 
var orderTable = ("#orderTable"); 
var lastResponse = 0; 
var sTemplate; 
var tableTemplate = '<tr>\ 
<th>{{Name}}</th>\ 
<th>{{Order}}</th>\ 
<th>{{Price}}</th>\ 
</tr>' 

setInterval(function() { 
$.ajax({ 
type: 'GET', 
cache: false, 
url: "http://localhost:51834/CoffeeService.svc/getallorders/", 
success: function(orders){ 
    console.log(orders); 
    if(lastResponse.toString().length === orders.toString().length) 
    { 
    console.log("LR" + lastResponse.toString().length); 
    console.log("same stuff"); 
    } else { 
    console.log("new stuff"); 
    lastResponse = orders; 
    console.log("LR" + lastResponse.toString().length); 
    $.each(orders, function(i, order){ 

     var sTemplate = tableTemplate; 
     sTemplate = sTemplate.replace("{{Name}}", order.Name); 
     sTemplate = sTemplate.replace("{{Order}}", order.Order); 
     sTemplate = sTemplate.replace("{{Price}}", order.Price + " -kr;"); 
     $("#orderTable").append(sTemplate); 
     }); 
    } 
    } 
    }); 
    }, 1000); 
}); 

Answer 1

機能に機能をラップ：

var tryCall = function() { 
    // your AJAX call here, with its callback and all 
}; 

そして、5秒ごとに実行する機能を設定します。

setInterval(tryCall, 5000); 

現在、あなたは結果のを起動しようとしています$.ajax()への1回の呼び出しだけで、1秒ごとにそうしようとしています。