jQuery追加和设置超时无限循环

Question

I'm try to display my json data in a table and refresh it periodically (to check if any new entries were added). However, I ended up getting stuck in an endless loop. The setTimeOut will keep appending old entries. Can someone help me figure this out?

js fiddle link: http://jsfiddle.net/eprte2m6/

js

<script>
  (function worker() {
  $.ajax({
    url: 'test.json',
    type: 'POST',
    data: 'json',
    success: function (response) {
        var trHTML = '';
        $.each(response, function (i, item) {
            trHTML += '<tr class="success"><td>' + item.type + '</td><td>' + item.date + '</td></tr>';
        });
        $('#monitor1').append(trHTML);
    },
  complete: function() {
    // Schedule the next request when the current one's complete
    setTimeout(worker, 5000);
  }
});
})();
</script>

test.json

[{
  "type":"Tablet", 
  "date":"02/03/14", 
},
{
  "type":"Tablet", 
  "date":"02/05/14", 
}]

html

<table class="table" id="monitor1">
      <thead>
        <tr>
          <th>type</th>
          <th>Date</th>
        </tr>
      </thead>
</table>      

Answer 1

There are two options

1) You can clear the table before appending like bellow.

$('#monitor1 tbody').empty();

after append the data to table

$('#monitor1').append(trHTML);

DEMO

2) You can have a variable which will contain your previous JSONdata and at the time of response you can check, if both data are not same get the difference between both in another JSON. And update your table with that difference.

Answer 2

不要使用.append ，而应使用.html如下所示：

$('#monitor1').html(trHTML);