javascript - 如何避免使用 ID 在屏幕上重复相同的对象？

Question

json 文件中存储了一个对象数组，每个对象都有一个 id。

[
    {
        "time": "1500058550",
        "id": 1
    },
    {
        "time": "1500058551",
        "id": 2
    }
]

我的 js 从文件中加载消息，比如说，每 5 秒一次(并显示它)，因为可以在其中添加新对象 。但是从文件下载的方式是加载(新的和旧的)对象。如何检查对象是否已加载的id？

callback(
  [{
      "time": "1500064939",
      "id": 1
    },
    {
      "time": "1500064940",
      "id": 2
    }
  ]);

function callback(respond) {
  setTimeout(function tick() {
    var timeNow = Date.now();
    for (var i = 0; i < respond.length; i++) {
      var data = respond[i];
      var timeInMessage = data.time * 1000;
      var diff_time = (timeNow - timeInMessage);
      if (diff_time <= 36000000) {
        var newDate = new Date(timeInMessage);
        var res = [newDate.getHours(), newDate.getMinutes(), newDate.getSeconds()].map(function(x) {
          return x < 10 ? "0" + x : x;
        }).join(":");
        var rowClone = $('.mess_hide').clone().removeClass('mess_hide');
        $('#messages').append(rowClone);
        $('.time', rowClone).html(res);
      }
    }
    setTimeout(tick, 5000);
  }, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroller">
  <table id="messages">
    <tr class="mess_hide">
      <td class="time"></td>
    </tr>
  </table>
</div>

如何实现此检查？我不知道该怎么做，请帮忙。

Answer 1

将 ids 存储在数组中，并在渲染之前进行检查。

var loadedItemsIds = [];

for (var i = 0; i < respond.length; i++) {
  var data = respond[i];
  if (loadedItemsIds.indexOf(data.id) >= 0) continue;
  loadedItemsIds.push(data.id);

  // do you stuff with the data
  ...
}

这比访问 DOM 并在那里搜索更好、更快、更简单。