javascript - 删除子元素

Question

我有一个 AJAX 聊天应用程序，它不断获取新数据并将其以另一个 div (.child) 的形式附加到一个 div (#container)。每秒可以插入多个 .child，但我只想保留最近的 10 个。每次下载时，我都会调用以下函数:

function cleanup(){
        var current = $('#container');
        var allData = current.children();
        if(allData.length > 10){
            for(var i = 0;i<allData.length-10;i++){
                allData[i].remove();
            }
        }   
    }

这有效，但它非常滞后。我必须切换当前选项卡才能看到 css 正常工作。我做错了什么吗？

我无法更改数据流，因为聊天取决于获取所有发送的数据。我只是在寻找删除旧元素的最有效方法。

示例:

如果我的 div 中有 30 个子项，则前 20 个子项将被 .remove() 处理，只保留最后 10 个。

Answer 1

而不是让一些代码添加 div 和清理功能之后清理它 - 如果我理解正确的话，可以添加一大堆 child ，而不仅仅是一个 - 为什么不在内存中有效地设置一个长度为 10 的队列，并继续插入东西(并在达到 10 件以上时将它们从后面弹出)，然后定期将这些 child 放在您的#container 上。

通过这种方式，您将始终获得最新的 10 个元素，但您可以以合理的速率更新容器(因此以合理的速率回流可视化文档)。

这可能是在一个时间间隔内，或者您甚至可以在每次处理消息时都这样做 - 但重点是，您不是在文档中添加内容、重排文档，然后再次从文档中删除。这似乎是解决问题的低效方法。