Question

我有一大堆项目，我将在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，但听起来很糟糕，结果（美学和计算）都会很难看！

Answer 1

不要使用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();

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

1 个答案: