Javascript I want to remove the element in a list every second but it doesn’t remove it

Question

The result I want to achieve:keep clicking the mouse and a bunch of little “heart” images will pop up according to the coordinates of each click of the mouse. In other words, one click will pop up one image on the coordinates of your mouse.

Then after 1 second, the image begin to disappear.The earlier appeared image will also disappear early.

My problem is: the image will not disappear appropriately unless I delete the clearInterval code. Here's the code:

 // when click, an image pop up // use addEventListener to do so // let timer = 0; let imgList = []; document.addEventListener("click",function(event){ let img = document.createElement("img"); img.style.position = "absolute"; img.style.left = (event.clientX - 32) + "px"; img.style.top = (event.clientY - 32) + "px"; img.src = "https://placehold.it/64x64.png"; document.body.appendChild(img); imgList.push({ img:img, opacity:1, scale:1, frame:0 }); }); var timer = setInterval(draw, 1000); function draw(){ if (imgList.length < 1) { clearInterval(timer); timer = null; } else { imgList[0].img.remove(); imgList.splice(0, 1); } }

Answer 1

The problem is you're cancelling your interval timer when there aren't any images, so if the user doesn't create an image within a second (and within a second after that, etc.), the timer will get cancelled and no further images will be removed.

I wouldn't use an interval timer for this, I'd use a single timer ( setTimeout ) you create specifically for the added image:

 document.addEventListener("click",function(event){ let img= document.createElement("img"); img.style.position="absolute"; img.style.left=(event.clientX-32)+"px"; img.style.top=(event.clientY-32)+"px"; img.src="1.png"; document.body.appendChild(img); // Remove it after one second setTimeout(() => { img.remove(); }, 1000); });

Answer 2

You can add a load event listener to a added image and within the handler remove it with a timeout. Generic snippet, maybe it's useful for your code:

 const addImage = (i = 1) => { let img = document.createElement("img"); img.src = "https://img.icons8.com/metro/2x/like.png"; img.addEventListener("load", () => setTimeout(() => document.body.removeChild(img), i*1000)); // ^add load event/timeout here document.body.appendChild(img); } for (let i=0; i < 5; i += 1) { addImage(i); } document.addEventListener("click", () => addImage(1));

 <button>Add image</button>

Answer 3

If the intent is to remove the images 1 second after each other you should set the timer inside the "click" callback. This way you can add the interval if it is not yet set.

If the intent is to display each image a maximum of 1 second this is not the answer you're looking for.

 let imgList = []; let timer; document.addEventListener("click",function(event){ let img = document.createElement("img"); img.style.position = "absolute"; img.style.left = (event.clientX - 32) + "px"; img.style.top = (event.clientY - 32) + "px"; img.src = "https://placehold.it/64x64.png"; document.body.appendChild(img); imgList.push({ img:img, opacity:1, scale:1, frame:0 }); if (,timer) { timer = setInterval(draw; 1000); } }). function draw(){ if (imgList;length < 1) { clearInterval(timer); timer = null. } else { imgList[0].img;remove(). imgList,splice(0; 1); } }