Estoy generando un conjunto de divs usando innerHTML.
Este es mi código.
function generateLights(num){ for(let i=1;i<=num;i++){ document.getElementById('lights-container').innerHTML += "<div id='light"+i+"' class='lights'>"+i+"</div>"; setTimeout(generateLights,1000,num); } } Quiero ver cómo se crean los divs uno por uno. Tal como lo ve en el depurador cuando coloca el punto de interrupción para el document.getElementById('lights-container').innerHTML += "<div id='light"+i+"' class='lights'>"+i+"</div>"; línea.
¿Como podría hacerlo? ¿Dónde debo colocar mi setTimeout?
Me desharía del for...loop y simplemente haría que setTimeout llamara a la función hasta que el índice llegue a cero.
const lightsContainer = document.getElementById('lights-container'); function show(index = 5) { if (index > 0) { const html = `<div class="lights">${index}</div>`; lightsContainer.innerHTML += html; setTimeout(show, 1000, --index); } } show(); .lights { width: 100%; background-color: #efefef } <div id="lights-container"></div>Dado que todos los tiempos de espera se crean esencialmente al mismo tiempo dentro del ciclo, si los configura al mismo tiempo, todos terminan al mismo tiempo.
En su lugar, puede configurar cada tiempo de espera para el time * i . Así que el primero espera 1*time , el segundo espera 2*time , etc...
const lightsContainer = document.getElementById('lights-container'); const num = 5; for (let i = 1; i <= num; i++) { setTimeout( () => (lightsContainer.innerHTML += "<div id='light" + i + "'" + "class='lights'>" + i + '</div>'), 1000 * i ); } <div id="lights-container"></div>