javascript - 我应该如何删除这些基于时间的元素？

Question

我<li>在页面加载上有 5 个元素。

<li>每隔几秒随机添加其他元素。我需要删除<li>页面上超过一分钟的元素。

我正在考虑有一个属性，称为data-created-at存储添加时间的属性。然后有一个循环函数（通过 js，在同一页面中）检查<li>要删除的元素。

如果以上是一个合理的方法。data-created-at我应该以毫秒为单位存储时间吗？

好主意？还是有更好的方法来解决这个问题？+1 对于提供代码片段及其描述的任何人。

Answer 1

我不确定这是否是一个更好的选择，但是您不能setTimeout在创建元素后一分钟就使用它们来设置有计划的破坏吗？

有人要求详细说明，所以我会尽力而为。这将有点伪代码。

new_guy = $("<li>Some wonderful text</li>");
insert(new_guy);
setTimeout(function() { delete(new_guy); }, 60000);

你已经定义了一个 functioninsert和一个 function delete，其中 insert 将你的 new 实际插入<li>到你的 HTML 中，并delete在 60 秒后被调用。

Answer 2

上面是一个很好的方法，尤其是在属性中使用与计算机上本地时间相匹配的时间戳。（不要让服务器添加属性，让 JavaScript 这样做以便它具有可比性。）

你的“循环”功能应该是这样的：

setInterval(function(){
  var staleTime = (new Date).getTime() - 60*1000;
  $('li[data-created-at]').find(function(){
    return $(this).data('created-at')*1 < staleTime;
  }).detach();
},1000); // check every 1 second

Answer 3

好吧，jQuery在设置时.data不使用data-属性，但我会完全按照您的描述进行操作：

setInterval(function() {
    $('li').each(function() {
        var $this = $(this);

        if(new Date().getTime() - $this.data('created-at') >= 60000) {
            // It's been a minute
            $this.remove();
        }
    });
}, 1000);

当然，如果你有一个现有的setInterval/setTimeout循环，把它放在那里。