Javascript我想每秒删除列表中的元素，但它没有’；不要把它拿走

我想要达到的结果是：不断点击鼠标，就会根据每次点击鼠标的坐标弹出一堆小“心脏”图像。换句话说，一次点击将在鼠标坐标上弹出一个图像

然后在1秒后，图像开始消失。较早出现的图像也将较早消失

我的问题是：除非我删除

clearInterval

代码，否则图像不会适当消失。代码如下：

//单击时，会弹出一个图像
//使用addEventListener执行此操作
//设定时器=0；
设imgList=[]；
document.addEventListener（“单击”），函数（事件）{
设img=document.createElement（“img”）；
img.style.position=“绝对”；
img.style.left=（event.clientX-32）+“px”；
img.style.top=（event.clientY-32）+“px”；
img.src=”https://placehold.it/64x64.png";
文件.正文.附件（img）；
推({
img:img，
不透明度：1，
比例：1，
帧：0
});
});
var定时器=设置间隔（绘图，1000）；
函数绘图（）{
如果（imgList.length<1）{
清除间隔（计时器）；
定时器=空；
}
否则{
imgList[0].img.remove（）；
imgList.拼接（0,1）；
}
}

问题是，当没有任何图像时，您正在取消间隔计时器，因此如果用户在一秒钟内（以及之后的一秒钟内等）没有创建图像，计时器将被取消，并且不会删除更多图像

我不会为此使用间隔计时器，我会使用您专门为添加的图像创建的单个计时器（

setTimeout

）：

document.addEventListener（“单击”），函数（事件）{
设img=document.createElement（“img”）；
img.style.position=“绝对”；
img.style.left=（event.clientX-32）+“px”；
img.style.top=（event.clientY-32）+“px”；
img.src=“1.png”；
文件.正文.附件（img）；
//一秒钟后取下它
设置超时（（）=>{
img.remove（）；
}, 1000);
});您可以将加载事件侦听器添加到添加的映像中，并在处理程序中超时删除它。通用代码段，可能对您的代码有用：


const addImage=（i=1）=>{
设img=document.createElement（“img”）；
img.src=”https://img.icons8.com/metro/2x/like.png";
img.addEventListener（“加载”，（）=>
setTimeout（（）=>document.body.removeChild（img），i*1000）；
//^在此处添加加载事件/超时
文件.正文.附件（img）；
} 
对于（设i=0；i<5；i+=1）{
addImage（i）；
}
document.addEventListener（“单击“，（）=>添加图像（1））
添加图像
如果目的是在图像彼此相隔1秒后删除图像，则应在“单击”回调中设置
计时器
。这样，如果尚未设置间隔，则可以添加间隔

如果目的是显示每个图像最多1秒，那么这不是您想要的答案


让imgList=[]；
让定时器；
document.addEventListener（“单击”），函数（事件）{
设img=document.createElement（“img”）；
img.style.position=“绝对”；
img.style.left=（event.clientX-32）+“px”；
img.style.top=（event.clientY-32）+“px”；
img.src=”https://placehold.it/64x64.png";
文件.正文.附件（img）；
推({
img:img，
不透明度：1，
比例：1，
帧：0
});
如果（！计时器）{
定时器=设置间隔（绘图，1000）；
}
});
函数绘图（）{
如果（imgList.length<1）{
清除间隔（计时器）；
定时器=空；
}
否则{
imgList[0].img.remove（）；
imgList.拼接（0,1）；
}
}