动态创建具有随机寿命的图像

Question

每隔0到2秒，我就在div中的任意位置创建一个图像，如下所示

setTimeout("addImage()", Math.floor((Math.random() * 2000) + 1));

我希望这些图像在创建后3-5秒消失。使用$('img').first().remove()，我可以删除最古老的图像，但我希望在创建它们之后的一段时间内，特别地删除它们，而不仅仅是最老的图像。如果没有其他方法，但这并不理想，这就足够了。

Answer 1

创建它们，然后单独为它们设置一个超时。

​

setInterval("addImage()", Math.floor((Math.random() * 2000) + 1));

function addImage() {
  var tmpImg = new Image();
  tmpImg.src = 'https://picsum.photos/200?' + new Date().getTime();
  $('#imgs').prepend(tmpImg);
  tmpImg.onload = function() {
    setTimeout(() => {
      $(this).fadeOut()
    }, 4000);
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='imgs'></div>

​