[SOLUCIONADO] Ejecutar función u objeto en paralelo

[danny_]

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:

var time=null;
//parámetros (elementoHtml,Salto que da en cada iteración, el alto total del sprite con las capas, tiempo de duracion)
function pelicula(elm,jumpPx,spriteHeight,duration){
    if(time==null){
        
        
               time=setInterval(action,duration);//255
 
        
    }
    var inc=0;
    function action(){
        
        if(inc<spriteHeight){
            inc+=jumpPx;
            elm.style.backgroundPosition='0px -'+inc+'px';
        }else{
            clearInterval(time);
            elm.style.backgroundPosition='0px -0px';
            time=null;
            
        }
    }
    
}
 

Código HTML:

<div id="gear" onmouseover="pelicula(this,124,992,200)">
   <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!!!

[patkoala]

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:

function pelicula(elm,jumpPx,spriteHeight,duration){
    var time=setInterval(action,duration);
    var inc=0;
    function action(){
        
        if(inc<spriteHeight){
            inc+=jumpPx;
            elm.style.backgroundPosition='0px -'+inc+'px';
        }else{
            clearInterval(time);
            elm.style.backgroundPosition='0px -0px';          
        }
    }
    
}
 

Y, esta vez sólo por cuestión de estilo, yo dejaría la función así:

Código Javascript:

function pelicula(elm,jumpPx,spriteHeight,duration){
    var time=setInterval(function(){
        
        if(inc<spriteHeight){
            inc+=jumpPx;
            elm.style.backgroundPosition='0px -'+inc+'px';
        }else{
            clearInterval(time);
            elm.style.backgroundPosition='0px -0px';          
        }
    },duration);
    var inc=0;   
}
 

[danny_]

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:

if(inc<spriteHeight){
            inc+=jumpPx;
            elm.style.backgroundPosition='0px -'+inc+'px';
        }else{
            clearInterval(time);
            elm.style.backgroundPosition='0px -0px';
            time=null; //Aquí es donde la vacio en caso de que exista una nueva llamada la variable no se autoicremente mas de una vez
            
        }
 

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.

[patkoala]

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:

function pelicula(elm,jumpPx,spriteHeight,duration){
    var inc=0;
    var time=setInterval(function(){
        
        if(inc<spriteHeight){
            inc+=jumpPx;
            elm.style.backgroundPosition='0px -'+inc+'px';
        }else{
            clearInterval(time);
            elm.style.backgroundPosition='0px -0px';          
        }
    },duration);  
}
 

Siento mucho las molestias.

[danny_]

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
 
function pelicula(elm,jumpPx,spriteHeight,duration){
    var inc=0;
    var time=setInterval(function(){
        
        if(inc<spriteHeight){
            inc+=jumpPx;
            //elm.style.backgroundPosition='0px -'+inc+'px';
            elm.innerHTML=inc;
        }else{
            clearInterval(time);
            elm.style.backgroundPosition='0px -0px';          
        }
    },duration);  
}
 
 
</script>
</head>
 
<body>
 
<p onclick="pelicula(this,1,1000,1000)">tiempo1</p>
<p onclick="pelicula(this,1,1000,1000)">tiempo2</p>
</body>
</html>
 

Fíjate que cuando das el primer click funciona perfectamente, pero al accionarlo nuevamente se pierde totalmente la constancia de los números.

[patkoala]

¡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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin tlo</title>
<script type="text/javascript">
var animacion_activa = new Array();
//Se crea un array que contiene referencias a los elementos que tiene una animacion activa
function pelicula(elm,jumpPx,spriteHeight,duration){
    if(animacion_activa.indexOf(elm)==-1){ //Se comprueba si la animación está activa o no
        animacion_activa.push(elm); //Si no lo está, se añade al array y se crea el intervalo
        var inc=0;
        var time=setInterval(function(){
            
            if(inc<spriteHeight){
                inc+=jumpPx;
                //elm.style.backgroundPosition='0px -'+inc+'px';
                elm.innerHTML=inc;
            }else{
                clearInterval(time);
                animacion_activa.splice(animacion_activa.indexOf(elm),1); //Por último, cuando el intervalo acaba, se remueve el elemento del array (ya no está activo)
                elm.style.backgroundPosition='0px -0px';          
            }
        },duration);
    }
}
 
 
</script>
</head>
 
<body>
 
<p onmouseover="pelicula(this,1,10,1000)">tiempo1</p>
<p onmouseover="pelicula(this,1,10,1000)">tiempo2</p>
</body>
</html>
 

[danny_]

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!!