Javascript 使用vue生成的动态图像数量有限

我想做一个随机定位图标的div，这就是我到目前为止所做的。 我们可以这样做，只生成有限数量的图像，如20个图像，而不是无限的

如果你有更好的方法来制作这样的东西，那我真的很感激

谢谢

让nextId=20
新Vue({
el:“#应用程序”，
数据（）{
返回{
图像：[
“//placekitten.com/200/200”，
“//placekitten.com/200/201”，
“//placekitten.com/200/202”，
“//placekitten.com/200/203”，
“//placekitten.com/200/204”，
],
增页：[]，
imgTop:-100，
imgLeft:-100，
imgHeight:64，
imgWidth:64，
更改间隔：10，
选择图像：“”
}
},
创建（）{
这个。randomImage（）；
const randomImg=func=>setInterval（func，this.changeInterval）；
randomImg（这是随机图像）；
randomImg（this.addImage）；
randomImg（此为随机位置）；
},
方法：{
随机图像（）{
const idx=Math.floor（Math.random（）*this.images.length）；
this.selectedImage=this.images[idx]；
},
随机位置（）{
const randomPos=twoSizes=>Math.round（Math.random（）*twoSizes）；
this.imgTop=randomPos（window.innerHeight-this.imgHeight）；
this.imgLeft=randomPos（window.innerWidth-this.imgWidth）；
},
addImage（）{
这是一个.addedImage.push({
风格：{
顶部：`${this.imgTop}px`，
左：`${this.imgLeft}px`，
高度：`${this.imgHeight}px`，
宽度：`${this.imgWidth}px`
},
src:this.selectedImage，
id:nextId++
});
},
}
})

.image{
位置：绝对位置；
}

---

为总计、当前计数和间隔参考引入变量：

限值：20，
柜台:0,，
间隔：空

将对

setInterval

的三个调用合并为一个，并存储间隔

created() {
  this.interval = setInterval(() => {
    this.randomImage();
    this.randomPosition();
    this.addImage();
    this.counter++;
    if (this.counter === this.limit) {
      clearInterval(this.interval);
    }
  }, this.changeInterval);
},

每次呼叫都会增加计数器，当达到限制时，间隔被清除。下面是一个演示：

让nextId=20
新Vue({
el:“#应用程序”，
数据（）{
返回{
图像：[
“//placekitten.com/200/200”，
“//placekitten.com/200/201”，
“//placekitten.com/200/202”，
“//placekitten.com/200/203”，
“//placekitten.com/200/204”，
],
增页：[]，
imgTop:-100，
imgLeft:-100，
imgHeight:64，
imgWidth:64，
更改间隔：10，
选择图像：“”，
限额：20，
柜台:0,，
间隔：空
}
},
创建（）{
this.interval=setInterval（（）=>{
这个。randomImage（）；
这个。随机位置（）；
这是addImage（）；
这个.counter++；
if（this.counter==this.limit）{
clearInterval（这个.interval）；
}
}，这个。更改间隔）；
},
方法：{
随机图像（）{
const idx=Math.floor（Math.random（）*this.images.length）；
this.selectedImage=this.images[idx]；
},
随机位置（）{
const randomPos=twoSizes=>Math.round（Math.random（）*twoSizes）；
this.imgTop=randomPos（window.innerHeight-this.imgHeight）；
this.imgLeft=randomPos（window.innerWidth-this.imgWidth）；
},
addImage（）{
这是一个.addedImage.push({
风格：{
顶部：`${this.imgTop}px`，
左：`${this.imgLeft}px`，
高度：`${this.imgHeight}px`，
宽度：`${this.imgWidth}px`
},
src:this.selectedImage，
id:nextId++
});
},
}
})

.image{
位置：绝对位置；
}

---

我通过添加一个具有数组长度的条件解决了这个问题

长度可以用我们想要的任意数量的图像来定义。例如，如果我们想要20张图像，则添加以下内容：

   addImage(){
        if (this.addedImage.length < 20) {
            this.addedImage.push({
                style: {
                    top: `${this.imgTop}vh`,
                    left: `${this.imgLeft}vw`,
                    height: `${this.imgHeight}px`,
                    width: `${this.imgWidth}px`
                },
                src: this.selectedImage,
                id: nextId++

            });
        }
    }

addImage（）{
如果（此.addedImage.length<20）{
这是一个.addedImage.push({
风格：{
顶部：`${this.imgTop}vh`，
左：`${this.imgLeft}vw`，
高度：`${this.imgHeight}px`，
宽度：`${this.imgWidth}px`
},
src:this.selectedImage，
id:nextId++
});
}
}

这是否回答了您的问题？不，我需要工作代码，因为我还提供了一个代码块。因此，我希望有人能帮助我编写真正的代码。这样，所有的时间间隔仍然在运行，占用处理器周期不，不是，我已经检查过了。迭代在20个图像后立即停止。这将停止创建新对象，但由于从未调用

clearInterval

，因此间隔仍在运行。这就是它的工作原理。