每隔2秒向DOM添加图像

Question

我正在为一个朋友制作一个生日快乐网站。我想在特定坐标每隔15秒向DOM添加图像。

我在脚本中有一个setTimeout函数，如下所示:

setTimeout(function(){
createBalloon(); 
}, 2000);

创建气球函数如下:

function createBalloon() {
var colors = ["10vw","30vw","50vw","70vw", "90vw"];
var randColor = colors[Math.floor(Math.random() * colors.length)];
var img = document.createElement("img");
img.src = "balloon.jpg";
img.className = "balloon";
var div = document.getElementById("balloon-div");
div.appendChild(img);
img.style.position = "absolute";
img.style.top = "100vh";
img.style.left = randColor;
var balloonList = document.getElementsByClassName("balloon");
}

我已经准备好了一切。但是当我把setTimeout放入一个无限循环时，它会阻止页面加载。

如何完成任务的任何线索????

Answer 1

使用setInterval函数代替，它将触发每一段时间

setInterval(function () {
createBalloon(); 
}, 2000);

Answer 2

setInterval函数是完成任务的最佳方法…但另一种选择是递归:

function loop(){
createBalloon();
setTimeout(function(){
loop(); 
}, 2000);
}
loop(); // make sure it's the last line in your script