时间戳

首页 > 解决方案 > Javascript我想每秒删除列表中的元素，但它不会删除它

javascript - Javascript我想每秒删除列表中的元素，但它不会删除它

问题描述

我想要达到的效果：一直点击鼠标，会根据鼠标每次点击的坐标弹出一堆小“心”图。也就是说，在鼠标坐标上，一键弹出一张图片。

然后1秒后，图像开始消失。较早出现的图像也会提前消失。

clearInterval我的问题是：除非我删除代码，否则图像不会适当消失。这是代码：

// 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);
    }
}

标签： javascript

解决方案

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

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

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);
});

推荐阅读