Problema para evitar apilamientos de registro de eventos

Italico76 · #1 (**permalink**) 27/05/2014, 12:04

Buenas,

No encuentro la forma de evitar que se me llene la pila de registro de eventos del tipo MouseOver, he intentado remover esos eventos con MouseOut pero no lo logro

Si ven en el este script que he escrito, si se pasa muchas veces por encima del caminante este acelera su paso debido a la clonacion de la funcion moveMeHor()

Código Javascript:

Ver original<html>
<head>
<title>No molestar!</title>
<style>
    body {background-color: #000;}  
    
    h1 {color: white;}
 
   #moverDiv
   {
        width:350px;
        height:350px;
        background-image: url("http://oi54.tinypic.com/28k3pjo.jpg");
        border: red 2px;
        position:relative;
   }
</style>
</head>
<body>
<h1> No me molestes </h1>
 
<div id = "moverDiv"></div>
 
<script>
    // @author: Pablo Bozzolo
    
    function moveMeHor(elem,cant,smooth)
    {
        smooth = smooth || false;
        
        elem.removeEventListener('mouseover',miHandler,false);
        
        if (!smooth){
            elem.style.left = cant;
            return; 
        }   
    
        (function(){            
            
            i = 0;
            inter = setInterval(function()
            {   
                if (i>cant)
                {                   
                    i=0;
                }           
            
                if (i==cant)
                {
                    clearInterval(inter);
                    div.addEventListener ('mouseover',miHandler,false);                 
                }               
                elem.style.left = i;
                i++;
                
            },1);
        })();   
        
        
    }
    
    window.onload = function()
    {   
        div = document.getElementById('moverDiv');  
 
        miHandler = function(){moveMeHor(div,500,true);};   
        miHandler2 = function(){console.log('removiendo handler1'); div.removeEventListener('mouseover',miHandler,false);}; 
            
        // espero un tiempito segundo antes de registrar el mouseover   
        setInterval(function(){
            div.addEventListener ('mouseover',miHandler,false);
            div.addEventListener ('mouseout',miHandler2,false);
        },500);
    }
        
</script>
</body>
</html>

Graciass!

ocp001a · #2 (**permalink**) 27/05/2014, 17:45

No estoy muy seguro de entender el problema, pero ¿no radica en que usas setInterval en vez de setTimeOut?

Italico76 · #3 (**permalink**) 27/05/2014, 17:57

Cita:

Iniciado por ocp001a

No estoy muy seguro de entender el problema, pero ¿no radica en que usas setInterval en vez de setTimeOut?

Estoy perdido.... uso setInterval() porque fue el primero que aprendi aunque voy a revisar la documentacion de setTimeOut()

El problema ? lo que pasa es que no se termina de mover el div y se generan nuevos eventos y se ejecutan nuevas instancias de la funcion que lo mueve y eso hace que se acelere y que despues de terminado el movimiento vuelva a comenzar otro monton de veces!!!

La falla es facil de ver... mueve el cursor dentro y fuera del div en movimiento varias veces rapidamente y veras lo que me pasa

Alexis88 · #4 (**permalink**) 27/05/2014, 19:36

La diferencia básica entre setInterval y setTimeout, es que el primer método ejecuta N veces una función cada X milésimas de segundo, mientras que el segundo método, ejecuta una y solo una vez la función luego de X milésimas de segundo. Prueba haciendo ese cambio de método.

Saludos

Italico76 · #5 (**permalink**) 27/05/2014, 19:57

Gracias @ocp001a y @Alexis88 por su sugerencia, no se si soy irremediablemente torpe en JS pero no logro me funcione, de hecho... ahora tengo un nuevo problema y es que se pierde el valor de la variable i entre invocacion e invocacion y entonces el contar no avanza... y creo me falta crear un closure para mantenerlo

Sera que me iluminan con su conocimiento del lenguaje ?

Código Javascript:

Ver original<html>
<head>
<title>No molestar!</title>
<style>
    body {background-color: #000;}  
    
    h1 {color: white;}
 
   #moverDiv
   {
        width:350px;
        height:350px;
        background-image: url("images/caminante.jpg");
        border: red 2px;
        position:relative;
   }
</style>
</head>
<body>
<h1> No me molestes </h1>
 
<div id = "moverDiv"></div>
 
<script>
    // @author: Pablo Bozzolo
    
    function moveMeHor(elem,cant,smooth)
    {
        smooth = smooth || false;
        
        console.log('In');
        
        //elem.removeEventListener('mouseover',miHandler,false);
        
        if (!smooth){
            elem.style.left = cant;
            return; 
        }   
    
        (function(){                        
            i = 0;
            inter = setTimeout(function()
            {   
                console.log(i);
                if (i>cant)
                {                   
                    i=0;
                }           
            
                if (i==cant)
                {
                    //clearTimeout(inter);
                    //div.addEventListener ('mouseover',miHandler,false);                   
                }               
                elem.style.left = i;
                i++;
                
            },1);
        })();   
        
        
    }
    
    window.onload = function()
    {   
        div = document.getElementById('moverDiv');  
 
        miHandler = function(){moveMeHor(div,500,true);};   
        miHandler2 = function(){console.log('removiendo handler1'); div.removeEventListener('mouseover',miHandler,false);}; 
            
        // espero un tiempito segundo antes de registrar el mouseover   
        setTimeout(function(){
            div.addEventListener ('mouseover',miHandler,false);
            //div.addEventListener ('mouseout',miHandler2,false);
        },500);
    }
        
</script>
</body>
</html>

Alexis88 · #6 (**permalink**) 28/05/2014, 02:13

Sospecho que buscas hacer algo como esto:

Lo que hice fue declarar el contador por fuera de la función y dentro de ella aumentarla, así aíslo su valor y por ende, el elemento se desplaza.

Saludos

Italico76 · #7 (**permalink**) 28/05/2014, 07:19

@Alexis88 : gracias sobre todo por haberte puesto a ver esto a tan altas horas de la madrugada

Si te fijas se sigue acelerando pues se siguen disparando eventos y estos llamando a nuevas instancias de la funcion que mueve al div

Cita:

Lo que hice fue declarar el contador por fuera de la función y dentro de ella aumentarla, así aíslo su valor y por ende, el elemento se desplaza.

Lo mismo hice yo y de hecho al usar setInterval() con una funcion anonima se termina formando un "closure" que hace que el valor de i se conserve dentro de esa funcion interna y se pueda incrementar con cada nueva llamada por ser la implementacion de setInterval() de tipo recursiva.

Por eso.. la sugerencia de setTiemeout() hace que las cosas se compliquen en el sentido de que ahora toca armar otra vez un closure para resolver el hecho de que no hay recursividad en su implementacion.

Veo tampoco lo hiciste con setTiemeout() y me gustaria saber si lograas superar el "escollo" y aprender de la solucion.

Alexis88 · #8 (**permalink**) 28/05/2014, 10:14

Creo haber hallado la solución:

Lo que hice fue tomar el valor de la propiedad left del elemento y como en la función la hago aumentar de 100px en 100px, verifico que dicho sea divisible entre 100 o sea igual a 0, lo cual quiere decir que la función ha terminado de ejecutarse o que no se ha ejecutado aún, recién en ese momento se aplicará la función, evitando así la creación de una cola.

Saludos

Italico76 · #9 (**permalink**) 28/05/2014, 10:33

Gracias @Alexis88 ... lo voy a mirar...gracias!!!!!!!