如何为动态创建的图片设置随机生命周期实现自动定时销毁

实现方案 #

你只需要在addImage函数内部，单张图片创建完成的节点，给当前这张图片绑定独立的延时删除定时器即可，每张图片的生命周期完全独立，不会出现只能删除最早创建图片的问题。
修改后的代码示例：

// 启动首次图片创建
setTimeout(addImage, Math.floor((Math.random() * 2000) + 1));

function addImage() {
  // 你的原有图片创建逻辑：创建img元素、设置随机位置、图片地址等
  const $newImg = $('<img>').attr('src', '你的图片资源地址').css({
    position: 'absolute',
    left: `${Math.random() * 100}%`,
    top: `${Math.random() * 100}%`
  });
  // 插入到目标div容器中
  $('你的目标div选择器').append($newImg);

  // 为当前这张图片设置3~5秒后自动删除的定时器
  const autoRemoveDelay = Math.floor(Math.random() * 2000 + 3000);
  setTimeout(() => {
    $newImg.remove();
  }, autoRemoveDelay);

  // 调度下一张图片的创建
  setTimeout(addImage, Math.floor((Math.random() * 2000) + 1));
}

注意事项 #

• 原写法中setTimeout("addImage()", ...)传递字符串执行语句的方式不推荐，直接传入函数引用addImage即可，避免eval执行带来的性能损耗和潜在安全问题
• 该方案中每个定时器只绑定对应创建的单张图片，删除逻辑完全独立，不会干扰其他图片的展示，时间计算也完全以单张图片的创建时间为起点，符合预期效果

内容的提问来源于stack exchange，提问作者flibety