Estoy haciendo un sitio web de feliz cumpleaños para un amigo. Quiero agregar imágenes al DOM después de cada 2 segundos en coordenadas específicas.
Tengo una función setTimeout en mi script de la siguiente manera:
setTimeout(function(){ createBalloon(); }, 2000);La función de creación de globos es la siguiente:
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"); }Tengo todo listo... pero cuando pongo setTimeout en un bucle infinito, evita que la página se cargue.
alguna pista de como hacer la tarea????
Use la función setInterval en su lugar, activará cada período de tiempo.
setInterval(function () { createBalloon(); }, 2000);La función setInterval es la mejor manera de hacer la tarea... pero una alternativa es la recursividad:
function loop(){ createBalloon(); setTimeout(function(){ loop(); }, 2000); } loop(); // make sure it's the last line in your script