Hola a todos. Resulta que me estoy haciendo una librería para realizar animaciones...Hasta ahora, desde el punto de vista práctico, cumple casi las mismas funciones que animate de Jquery.
Por donde quiero seguir es, agregandole la función de elegir un intervalo de tiempo por cada propiedad. Por ej:
height {nVal: 250, int: 10}
width { nVal: 300, int: 35}
En el script cambiaría el alto suficiente cada 10 ms hasta llegar a 250 X y el ancho suficiente cada 35 ms hasta llegar a 300 X.
Pongo X porque pueden ser px, em, %, etc.
Entonces, como intento hacer código lo menos pesado en cuanto velocidad, me encuentro con dos opciones y no se cual elegir.
Las opciones de las que hablo son:
1) Hacer varios setTimeout para cada intervalo
2) Usar un sólo setTimeout para varios intervalos, y, a diferencia del anterior, utilizando menos setTimeouts y funciones pero más arrays, comprobaciones según el retardo que se esté utilizando y comprobaciones del contador general con respecto al contador de cada propiedad.
El contador de la propiedad, son las veces que hay que cambiar el valor de la propiedad hasta tener el valor deseado.
El contador general, es el valor del contador de propiedad más alto que hay.
Considero que la frase "Una imagen vale más que mil palabras" es válida en éste área como "Un script vale más que mil palabras", ja, así que acá van dos script con las diferencias que habrían entre las dos opciones:
1)
Código Javascript
:
Ver original//Mucho Código
//...
intWidth=10
intHeight=35
contWidth=13
contHeight=8
contMax=13
intervalos=[10,10,10,5,5]
function fnAnima()
{
//Cambia ancho necesario si el retardo es igual a 10 y si cont es menor que contWidth
//Cambia alto necesario si el retardo es igual a 5 y si cont es menor que contHeight
intervalos.push(intervalos.shift()) //Corro los elem del array a la izquierda, en la primera iteración sería: intervalos =[10,10,5,5,10], y así...
if(cont==contMax)
{
return 0 //si lo hizo las veces que era necesario , termina.
}
cont++
setTimeout(fnAnima,intervalos[0])
}
//Omito la función para calcular en qué orden y que valor deben tener los intervalos,
// que no estaría en la 2da opción.
//También hay un contador general, que se debe andar comparando cada 2x3 con el de la
//propiedad.
//...
//Mucho Código
2)
Código Javascript
:
Ver originalintWidth=10
intHeight=35
contWidth=13
contHeight=8
cont=0
function fnAnimaH()
{
//cambia alto necesario
cont++
if(contHeight==cont)
{
return 0 //Si lo hizo las veces que era necesario, termina
}
setTimeout(fnAnimaH,intHeight)
}
function fnAnimaW()
{
//cambia ancho necesario
cont++
if(contWidth==cont)
{
return 0 //Si lo hizo las veces que era necesario, termina
}
setTimeout(fnAnimaW,intWidth)
}
//Sería una función por cada propiedad, en este caso una para Width y otra para Height.
Que quede claro que son ejemplos, esto tiene muchísimo más código, y orientado a objetos; pero representa exactamente las diferencias que habría en utilizar un método u otro.
Otras dudas en cuanto a rendimiento en JS:
Si ofusco el código, aparte de ganar ancho de banda para el cliente, ¿gano velocidad en JS?.
¿qué métodos/técnicas conocen para ganar rendimiento?
¿conocen alguna manera de testear la velocidad de ejecución de JS?
Si conocen alguna guía relacionada con el tema, les estaría muy agradecido.
PD: No quiero parecer un obsesionado, pero como voy a tratar con algo que lo voy a utilizar
mucho, no quiero que se cuelgue el navegador. (aunque todavía no pasó, me prevengo)
Gracias y Salu2.