al codificar, me encontré con este problema muy extraño. Mi código está a continuación: js
document.getElementById("id").style.width = "0%" var a = 0; setTimeout(function () { if (a <= 60) { document.getElementById("id").style.width = a + "%"; a++; } }, 100);
Quiero que se ejecute 60 veces, cada vez cambiando el ancho del div en un 1%. Sin embargo, cuando ejecuto el código, el bloque if hace que finalice instantáneamente como si el tiempo de espera no funcionara. ¿Alguien puede decirme qué está mal? ¡Gracias por adelantado!
La función setTimeout
se ejecuta solo una vez después de ese tiempo especificado en milisegundos.
Si desea seguir ejecutando el bloque, debe utilizar setInterval
en lugar de setTimeout
.
setInterval
continúa llamando a la función desde que se borra el intervalo.
No olvides llamar a clearInterval
una vez que alcances el objetivo.
var a = 0; const interval = setInterval(function () { if (a <= 60) { console.log("Im being called"); document.getElementById("id").style.width = a + "%"; a++; } else { // Target achieved, clearing interval console.log("Im stoping execution"); clearInterval(interval) } }, 100);
#id { height: 300px; background: orange; }
<div id="id"></div>