0

我有一大堆项目，我在 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，但这听起来很糟糕，而且结果（美学和计算）会很丑陋！

4

1 回答 1

2

不要为您的 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();

于 2013-10-01T17:50:52.897 回答