Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Ejecutar función u objeto en paralelo

Estas en el tema de Ejecutar función u objeto en paralelo en el foro de Javascript en Foros del Web. Buenas gente, Necesito realizar una función para generar una animación modificando la position background del css. La función que he creado funciona perfectamente, pero falla ...
  #1 (permalink)  
Antiguo 03/11/2013, 12:45
Avatar de danny_  
Fecha de Ingreso: septiembre-2012
Mensajes: 95
Antigüedad: 7 años, 2 meses
Puntos: 4
Ejecutar función u objeto en paralelo

Buenas gente,

Necesito realizar una función para generar una animación modificando la position background del css.

La función que he creado funciona perfectamente, pero falla un grandísimo detalle, y es que intento reutilizar esa función para varios eventos en mi html, pero al parecer javascript no ejecuta las funciones en paralelo cada vez que se hace una llamada desde un evento.

Os dejo un fragmento de código.

Código Javascript:
Ver original
  1. var time=null;
  2. //parámetros (elementoHtml,Salto que da en cada iteración, el alto total del sprite con las capas, tiempo de duracion)
  3. function pelicula(elm,jumpPx,spriteHeight,duration){
  4.     if(time==null){
  5.        
  6.        
  7.                time=setInterval(action,duration);//255
  8.  
  9.        
  10.     }
  11.     var inc=0;
  12.     function action(){
  13.        
  14.         if(inc<spriteHeight){
  15.             inc+=jumpPx;
  16.             elm.style.backgroundPosition='0px -'+inc+'px';
  17.         }else{
  18.             clearInterval(time);
  19.             elm.style.backgroundPosition='0px -0px';
  20.             time=null;
  21.            
  22.         }
  23.     }
  24.    
  25. }

Código HTML:
Ver original
  1. <div id="gear" onmouseover="pelicula(this,124,992,200)">
  2.    <div id="code" onmouseover="pelicula(this,124,1116,340)">



Mi duda es, como generar varios eventos en paralelo sin que eso afecte al que esta ejecutándose (si se ha activado alguna de las animaciones con el evento).
En cuanto ejecuto la animación del div id="gear" y acto seguido quiero activar la otra animación me da problemas.

Saludos!!!
__________________
http://www.danielcarvajal.es
  #2 (permalink)  
Antiguo 03/11/2013, 14:37
Avatar de patkoala  
Fecha de Ingreso: julio-2011
Mensajes: 62
Antigüedad: 8 años, 3 meses
Puntos: 19
Respuesta: Ejecutar función u objeto en paralelo

El problema radica en que cuando vas a ejecutar la función por segunda vez, la variable 'time' ya está definida por la anterior llamada.
Yo lo intentaría así:
Código Javascript:
Ver original
  1. function pelicula(elm,jumpPx,spriteHeight,duration){
  2.     var time=setInterval(action,duration);
  3.     var inc=0;
  4.     function action(){
  5.        
  6.         if(inc<spriteHeight){
  7.             inc+=jumpPx;
  8.             elm.style.backgroundPosition='0px -'+inc+'px';
  9.         }else{
  10.             clearInterval(time);
  11.             elm.style.backgroundPosition='0px -0px';          
  12.         }
  13.     }
  14.    
  15. }
Y, esta vez sólo por cuestión de estilo, yo dejaría la función así:
Código Javascript:
Ver original
  1. function pelicula(elm,jumpPx,spriteHeight,duration){
  2.     var time=setInterval(function(){
  3.        
  4.         if(inc<spriteHeight){
  5.             inc+=jumpPx;
  6.             elm.style.backgroundPosition='0px -'+inc+'px';
  7.         }else{
  8.             clearInterval(time);
  9.             elm.style.backgroundPosition='0px -0px';          
  10.         }
  11.     },duration);
  12.     var inc=0;  
  13. }
  #3 (permalink)  
Antiguo 03/11/2013, 18:23
Avatar de danny_  
Fecha de Ingreso: septiembre-2012
Mensajes: 95
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: Ejecutar función u objeto en paralelo

Gracias por tu ayuda.

Esta vez consigo que se ejecuten en segundo plano, pero como bien dices el problema era que ya estaba declarada la variable time en la llamada anterior. Si no vacío esta variable en esta parte del código

Código Javascript:
Ver original
  1. if(inc<spriteHeight){
  2.             inc+=jumpPx;
  3.             elm.style.backgroundPosition='0px -'+inc+'px';
  4.         }else{
  5.             clearInterval(time);
  6.             elm.style.backgroundPosition='0px -0px';
  7.             time=null; //Aquí es donde la vacio en caso de que exista una nueva llamada la variable no se autoicremente mas de una vez
  8.            
  9.         }

Al volver a realizar una llamada a esa función la variable time incrementa aun mas su velocidad y esto provoca que la animación vaya muy acelerada perdiendo su velocidad normal. Alguna idea?

Gracias por tu respuesta anterior.
__________________
http://www.danielcarvajal.es
  #4 (permalink)  
Antiguo 04/11/2013, 10:25
Avatar de patkoala  
Fecha de Ingreso: julio-2011
Mensajes: 62
Antigüedad: 8 años, 3 meses
Puntos: 19
Respuesta: Ejecutar función u objeto en paralelo

La velocidad del intervalo se define al llamar a setInterval, es decir, cuando asignas una variable a setInterval, estás asignando una referencia para poder cerrarlo.
Por mucho que cambies la variable (la incrementes) la velocidad del intervalo no variará.
De hecho no es necesario que iguales time a null, ya que al ser una variable local, cuando paras el intervalo la destruyes.
El que puede estar generando ese comportamiento es el uso del último código que dejé, ya que tiene un error grave.
La variable "inc" debe inicializarse antes de la creación del intervalo.
Código Javascript:
Ver original
  1. function pelicula(elm,jumpPx,spriteHeight,duration){
  2.     var inc=0;
  3.     var time=setInterval(function(){
  4.        
  5.         if(inc<spriteHeight){
  6.             inc+=jumpPx;
  7.             elm.style.backgroundPosition='0px -'+inc+'px';
  8.         }else{
  9.             clearInterval(time);
  10.             elm.style.backgroundPosition='0px -0px';          
  11.         }
  12.     },duration);  
  13. }
Siento mucho las molestias.
  #5 (permalink)  
Antiguo 04/11/2013, 16:21
Avatar de danny_  
Fecha de Ingreso: septiembre-2012
Mensajes: 95
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: Ejecutar función u objeto en paralelo

Gracias, no consigo el efecto deseado aunque me ha sido de ayuda tus respuestas. Lo que quiero es que si hay un setInterval en ejecución y hago otra llamada a esa función, la variable inc al estar ya declarada hace saltos desde 0 hasta el último número que contó en el momento que se vuelve a hacer la llamada a la función con el evento onclick.

He probado con las famosas callbacks que hasta el momento no las conocía, pero tampoco he podido solucionarlo. No sé, si me explico lo que te quiero decir. Te dejo un código funcional donde la función va imprimiendo el incremento dentro de un elemento html, con esto será mucho mas visual.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5. <script type="text/javascript">
  6.  
  7. function pelicula(elm,jumpPx,spriteHeight,duration){
  8.     var inc=0;
  9.     var time=setInterval(function(){
  10.        
  11.         if(inc<spriteHeight){
  12.            inc+=jumpPx;
  13.            //elm.style.backgroundPosition='0px -'+inc+'px';
  14.             elm.innerHTML=inc;
  15.        }else{
  16.            clearInterval(time);
  17.            elm.style.backgroundPosition='0px -0px';          
  18.        }
  19.    },duration);  
  20. }
  21.  
  22.  
  23. </head>
  24.  
  25.  
  26. <p onclick="pelicula(this,1,1000,1000)">tiempo1</p>
  27. <p onclick="pelicula(this,1,1000,1000)">tiempo2</p>
  28. </body>
  29. </html>


Fíjate que cuando das el primer click funciona perfectamente, pero al accionarlo nuevamente se pierde totalmente la constancia de los números.
__________________
http://www.danielcarvajal.es
  #6 (permalink)  
Antiguo 05/11/2013, 12:01
Avatar de patkoala  
Fecha de Ingreso: julio-2011
Mensajes: 62
Antigüedad: 8 años, 3 meses
Puntos: 19
Respuesta: Ejecutar función u objeto en paralelo

¡Creo que al fin encontré la solución!
Igualmente si no es lo que esperabas, estaré encantado de intentar ayudarte.
El problema era que se generaban muchas llamadas a la misma función al mover el ratón por encima, por lo tanto se creaban muchos intervalos que movían el fondo a su ritmo.
He cambiado el ejemplo que me diste para solucionarlo, simplemente aplica los mismos cambios a tu código.
Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin tlo</title>
  6. <script type="text/javascript">
  7. var animacion_activa = new Array();
  8. //Se crea un array que contiene referencias a los elementos que tiene una animacion activa
  9. function pelicula(elm,jumpPx,spriteHeight,duration){
  10.     if(animacion_activa.indexOf(elm)==-1){ //Se comprueba si la animación está activa o no
  11.         animacion_activa.push(elm); //Si no lo está, se añade al array y se crea el intervalo
  12.         var inc=0;
  13.         var time=setInterval(function(){
  14.            
  15.             if(inc<spriteHeight){
  16.                 inc+=jumpPx;
  17.                 //elm.style.backgroundPosition='0px -'+inc+'px';
  18.                 elm.innerHTML=inc;
  19.             }else{
  20.                 clearInterval(time);
  21.                 animacion_activa.splice(animacion_activa.indexOf(elm),1); //Por último, cuando el intervalo acaba, se remueve el elemento del array (ya no está activo)
  22.                 elm.style.backgroundPosition='0px -0px';          
  23.             }
  24.         },duration);
  25.     }
  26. }
  27.  
  28.  
  29. </script>
  30. </head>
  31.  
  32. <body>
  33.  
  34. <p onmouseover="pelicula(this,1,10,1000)">tiempo1</p>
  35. <p onmouseover="pelicula(this,1,10,1000)">tiempo2</p>
  36. </body>
  37. </html>
  #7 (permalink)  
Antiguo 05/11/2013, 20:00
Avatar de danny_  
Fecha de Ingreso: septiembre-2012
Mensajes: 95
Antigüedad: 7 años, 2 meses
Puntos: 4
Respuesta: Ejecutar función u objeto en paralelo

Grandioso!! Eso es exactamente lo que quería. Consulté en algunos foros y daban soluciones diferentes como crear cada vez una función para cada evento asignando sus propias variables pero algo me decía que no era la forma mas lógica y que había una forma de conseguir una función realmente reutilizable, y eso mismo que me estaba dando dolores de cabeza lo has solucionado tú.

Mil gracias!!
__________________
http://www.danielcarvajal.es

Etiquetas: funcion, html, objeto, paralelo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 17:17.