如何使用jQuery延迟10秒的延迟，如何删除每个列表项目

Question

我试图一一删除列表中的项目，但似乎无法使其起作用。我需要单独删除它们，而不是同时删除它们。我需要在每次拆卸之间延迟将它们拆除，最好是10秒。谁能帮忙？

 <div class="health-bar">
   <ul>
    <li class="heart5"><img src="heart.png" alt="Smiley face"  width="60px"> </li>
    <li class="heart4"><img src="heart.png" alt="Smiley face"  width="60px"> </li>
    <li class="heart3"><img src="heart.png" alt="Smiley face"  width="60px"> </li>
    <li class="heart2"><img src="heart.png" alt="Smiley face"  width="60px"> </li>
    <li class="heart1"><img src="heart.png" alt="Smiley face"  width="60px"> </li>
   </ul>
 </div>

我走了这么远，但停了下来，因为我知道这不是正确的。

 $('.health-bar ul li.heart5').delay(10000).remove();
 $('.health-bar ul li.heart4').delay(20000).remove();
 $('.health-bar ul li.heart3').delay(30000).remove();
 $('.health-bar ul li.heart2').delay(40000).remove();
 $('.health-bar ul li.heart1').delay(50000).remove();

Answer 1

您可以使用settimeout进行操作。因为.delay()是一个函数属于动画队列。

var lis = $(".health-bar > ul > li");
for(var i=0; i<lis.length; i++){
 (function(i) {
  setTimeout(function(){
   lis.eq(i).remove();
  }, (i+1) * 10000);
 })(i);
}

，如果您喜欢使用ES6，那么事情变得更加简单。

let lis = $(".health-bar > ul > li");
for(let i=0; i<lis.length; i++){
  setTimeout(function(){
   lis.eq(i).remove();
  }, (i+1) * 10000);
}

demo

Answer 2

您无需循环即可做到这一点，这可能会更干净。此示例的超时时间为一秒钟，因此请根据您的要求进行调整。

let items = $('.health-bar ul li');
setTimeout(checkItems, 1000, items, 0);
function checkItems(items, index) {
  if (index < items.length) {
    items.eq(index).remove();
    setTimeout(checkItems, 1000, items, ++index);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="health-bar">
  <ul>
    <li class="heart5"><img src="heart.png" alt="Smiley face" width="60px"> </li>
    <li class="heart4"><img src="heart.png" alt="Smiley face" width="60px"> </li>
    <li class="heart3"><img src="heart.png" alt="Smiley face" width="60px"> </li>
    <li class="heart2"><img src="heart.png" alt="Smiley face" width="60px"> </li>
    <li class="heart1"><img src="heart.png" alt="Smiley face" width="60px"> </li>
  </ul>
</div>