同时从数组和 DOM 中删除项目

Removing items from array and DOM simultaneously

本文关键字：DOM 删除项目 数组      更新时间：2023-09-26

我有大量的项目数组，我将在setInterval内逐个删除这些项目。

var randomInt = function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};
var showItems = function() {
    $.each(items, function(key, val) {
        $('.list').append('<div class="item" id="i'+key+'">'+val+'</div>');
    });
};
var interval = setInterval(function() {
    var id = randomInt(0, items.length);
    items.splice(id, 1);
    $('#i'+id).remove();
    if (items.length < 10) {clearInterval(interval);}
}, 200);

当列表开始变短时，问题就出现了。假设项目以 500 个条目开头。一旦items.length等于 200，DOM 中的 id 将保持不变。这会导致从数组中删除项，而不是从 DOM 中删除。

我想到的另一种方法是 delete items[id] ，但是当一个项目已被删除时，就会出现稀疏删除的问题。一旦定义的项目计数达到 ~20，就会花费很长时间才能发生更多的事情。

我能想到的解决方案是在每次删除时重绘 DOM，但这听起来很糟糕，结果（美学和计算）会很丑陋！

不要对 DIV 使用 ID，而是执行以下操作：

<div class="list">
  <div class="item">First DIV</div>
  <div class="item">Second DIV</div>
  ...
</div>

而不是$('#i'+id).remove();做$('.list > .item').eq(id).remove();

相关文章：