Add images to the DOM after every 2 seconds

Question

I am making a happy birthday website for a friend. I want to add images to the DOM after every 2s at a specific co-ordinates.

I have a setTimeout function in my script as follows :

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

The create balloon function is as follows :

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

I have all things ready... but when I put the setTimeout in an infinte loop, it prevents the page from loading.

Any clues how to do the task????

Answer 1

Use setInterval function instead it will trigger each period of time.

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