Every 0-2 seconds I'm creating an image at a random location within a div like this
setTimeout("addImage()", Math.floor((Math.random() * 2000) + 1));
I want these images to disappear 3-5 seconds after they're created. Using $('img').first().remove() I can remove the oldest image, but I want to specifically remove them at a time after they're created, not just the oldest one. This will suffice if there is no other way, but it isn't ideal.
Create them, then set a timeout for them individually.
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>