javascript - 如何使用 JQuery 延迟 10 秒一个接一个地删除每个列表项？

Question

Im trying to remove items in a list one by one but cant seem to get this to work. I need them removed individually and one after another- not all at the same time. I need them removed with a delay in between each removal, preferably 10 seconds. Can anyone help?

 <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>

I got this far but stopped because I know this isn't correct.

 $('.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