将元素插入DOM，位置基于时间戳

Inserting elements into DOM, basing position on timestamp

本文关键字：时间戳 位置 元素 插入 DOM      更新时间：2023-09-26

我有一个JSON对象，它有一个"更新"数组，其中每个"更新"都由一个时间戳和一条消息组成：

updates : {
    {
        timestamp : 1329505671,
        text : 'test1'
    },
    {
        timestamp : 1329505783,
        text : 'test2'
    }
}

使用jQuery，我将这些元素解析为DOM元素，并按照接收顺序在同一级别插入它们。它们是基于AJAX调用中的SQL查询进行预排序的。

现在，我有一个重复的ajax调用，用于检查新的更新。如果找到更新，则需要将其插入DOM中的适当位置。

我不能假设这些更新总是列表中最新的更新，所以，我需要一种方法来找到在哪个DOM更新之后插入新的更新。

我曾计划创建一个Map<int, DOMUpdate>（Javascript中的updates[timestamp] = DOMUpdate）。

不过，这个计划有几个缺陷：

  1. 我必须找到/创建一个快速的二进制搜索算法将更新放在哪个时间戳之后
  2. 我不能有重复的时间戳

所以我的问题是，如果其他人也做过类似的事情，如果是，你是如何处理的？如果我有任何不清楚的地方，请告诉我。

只需找到第一个时间戳大于它的元素，并将其附加在该元素之前。如果没有找到，则它是最新的，应根据您发布它们的顺序（最新的第一个或最后一个）附加在开始/结束处。

var appended = false;
$(collection).each(function(){
  var timestamp = $(this).data("timestamp"); // replace with your code
  if (timestamp < obj.timestamp) {
    $(this).before(buildNewElement(obj));
    appended = true;
    return false;
  }
});
if (!appended) {
  $(collection).last().after(buildNewElement(obj));
}

显然，这只是一个概念，您需要对其进行修改以适应您的代码/需求。

编辑：

如果您将数据存储在一个对象数组中，然后在收到更多对象时将对象添加到该数组中，则可以根据时间戳对该数组进行排序，然后在排序后根据索引附加新对象。您必须向新接收的对象添加一个属性，然后在遍历所有对象并仅附加具有该属性的对象时删除该属性。

相关文章：