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

时间:2012-02-17 19:21:00

标签: javascript jquery dom binary-search

我有一个带有“updates”数组的JSON对象,其中每个“update”都包含一个时间戳和一条消息:

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

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

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

我不能假设这些更新将始终是列表中的最新更新,因此,我需要一种方法来查找在之后插入新更新的DOM更新。

我原计划在Javascript中创建Map<int, DOMUpdate>个排序(updates[timestamp] = DOMUpdate)。

但是这个计划存在一些缺陷:

  1. 我必须找到/创建一个快速二进制搜索算法来查找 将更新放在哪个时间戳之后。
  2. 我没有重复的时间戳。
  3. 所以我的问题是,如果其他人做过类似的事情,如果是的话,你是怎么做到的?如果我不清楚,请告诉我。

1 个答案:

答案 0 :(得分: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));
}

显然这只是一个概念,您需要修改它以适合您的代码/要求。

编辑:

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