Estoy aprendiendo a hacer animaciones con JavaScript puro. Básicamente lo que quiero es esto: Que luego de 5 segundos un número se incremente (a velocidad rápida) desde 0 hasta 300, luego de otros 5 segundos de espera, que este mismo número se incremente hasta 600, y luego de 5 segundos mas de espera, que este numero se incremente finalmente a 900... Con esto intento aprender a crear la velocidad de animación y el delay sin jQuery.
Más o menos lo he conseguido, pero con un código horrible. Lo pondré para que lo vean y por favor espero que me muestren como ustedes lo harían más resumido o cómo podría mejorar lo que he hecho.
Lean mi código desde abajo hacia arriba. Primero el setTimeout
, luego las funciones uno
, dos
y tres
:
var i = 0;
function tres() {
alert(900)
}
function dos() {
function two() {
if (i > 600) {
clearInterval(this)
} else {
console.log(i++)
}
}
setInterval(two, 13); //velocidad de animacion
setTimeout(tres, 5000) //tercer delay
}
function uno() {
function one() {
if (i > 300) {
clearInterval(this) //detiene el incremento cuando llega a 300
} else {
console.log(i++)
}
}
setInterval(one, 13); //velocidad de animacion
setTimeout(dos, 5000) //segundo delay
}
setTimeout(uno, 5000) //primer delay