[SOLUCIONADO] ¿cómo hacer que se pare una función mediante un evento?

berkeleyPunk · #1 (**permalink**) 08/05/2013, 12:34

En mis anteriores posts he sido muy prólijo en los detalles. Para no cansar al lector con cosas acerca de, por ejemplo, cómo he intentado solucionar mi problema actual, sólo voy a mencionar la bronca exacta.

Tenemos un efecto blink creado con javascript (después de aprender a hacer esto, me entero que existe una función javascript llamada blink() ):

Código Javascript:

Ver originalfunction parpadear()
    {
        with ( document.getElementById("textoParpadeante").style )
        {
            visibility = (visibility == "visible")?"hidden":"visible";
        }
    }

Ahora aplicamos esta función a un link:

Código HTML:

Ver original<body onload='setInterval("parpadear()", 500);'>
 
<a href="#" id="textoParpadeante">Este link no debe parpadear cuando tiene el cursor encima!</a>
</body>

El resultado es que este link parpadea todo el tiempo. Pero supongamos que no queremos que el link parpadee cuando ponemos el cursor encima.
Es decir, cuando suceda el evento onmouseover en el link, ¿cómo podríamos hacerle para que la función parpadear() se detenga?

alexg88 · #2 (**permalink**) 08/05/2013, 16:14

Buenas,

Te dejo un ejemplo:

http://jsfiddle.net/alexg88/ZQGf3/

Como ves, he creado una función que puede reutilizarse para tantos elementos como se desee.

Un saludo.

chwc · #3 (**permalink**) 08/05/2013, 16:21

Hola ! mira, hay otras formas de hacer que un texto parpadee, recientemente vi un post de VisualIdiot, un maestro en javascript y css, el cual en este post muestra como aplicar un efecto blink mediante css.

ahora, para hacer que solo parpadee cuando el mouse no se encuentra sobre el elemento, le agregamos un pequeño fix de hover, y resuelto !

el ejemplo esta aca : http://jsfiddle.net/xTnxv/

berkeleyPunk · #4 (**permalink**) 08/05/2013, 21:08

Cita:

Iniciado por alexg88

Buenas,
Te dejo un ejemplo:
http://jsfiddle.net/alexg88/ZQGf3/ ...

Tu aplicación funciona a la perfección.
Lo voy a estudiar para entender bien el código y luego poder hacerlo yo solo. Regreso y puntuo.

Sólo una cosa más, para qué sirve y cómo funciona la página http://jsfiddle.net

Saludos

berkeleyPunk · #5 (**permalink**) 08/05/2013, 21:20

Cita:

Iniciado por chwc

Hola ! mira, hay otras formas de hacer que un texto parpadee...

De hecho, inicialmente trabajé el efecto blink con CSS, pero como el malhadado Internet Explorer (tengo la versión 8) no jaló el efecto blink, decidí hacerlo con javascript para que así jale en todos los browsers (suponiendo, claro, que el cliente tenga habilitado el JS).

El código que mandas no jala en IE. Y eso que el código contiene la propiedad (etiqueta o como se llame) -ms-animation.

Saludos

alexg88 · #6 (**permalink**) 09/05/2013, 12:55

La web jsfiddle sirve para realizar pruebas de código que involucran html, css y javascript. También incluyen por defecto una serie de librerías javascript como jquery, mootols, etc.

Existen otras webs que hacen lo mismo o cosas parecidas.

Un saludo.

PD: Si tienes alguna duda del código, pregunta.

berkeleyPunk · #7 (**permalink**) 09/05/2013, 20:09

Cita:

Iniciado por alexg88

...
...
PD: Si tienes alguna duda del código, pregunta.

Todo se ve bien, pero tengo un problema. Nunca había visto que function() se empleara sin un nombre de función.
Veamos el siguiente ejemplo:

Código Javascript:

Ver originalwindow.onload = function()
{
   funcionA();
   funcionB();
   funciónC();
}

Le estuve buscando y hasta donde entiendo, lo anterior se lee así:
"Una vez que termine de cargarse la página se van a ejecutar las siguientes funciones: funcionA() funciónB() y funciónC()".

Creo que no poner un nombre de función a function() se hace para decirle al parser que se van a ejecutar una serie de funciones, esto para evitar repetir 3 veces window.onload = functionn() (cosa que, aunque se hiciera, no serviría, porque sólo se ejecutaría la última función).
Creo que no poner nombre de función a function() tiene más o menos el mismo sentido que el with, que te evita la molestia de andar poniendo cada rato el nombre del objeto que trabajamos. Pero aunque mi interpretación sea correcta, no entiendo cómo funciona no poner nombre de función a function() en el siguiente caso:

Código Javascript:

Ver originalid = setInterval( function(){blink_aux(element);}, 500 );

¿No sería más sencillo hacerlo así?:

Código Javascript:

Ver originalid = setInterval( "blink_aux(element)", 500 );

Este 2do código no funciona.

¿Cuál es la diferencia? ¿Por qué el 1er código funciona y el 2do no, cuando virtualmente los dos dicen lo mismo? no?

alexg88 · #8 (**permalink**) 10/05/2013, 12:54

Buenas,

1º. La palabra clave function se usa sin nombre para crear una función anónima. Es una función normal pero sin nombre.

Se usa en casos en los que sólo necesitas utilizar la función en un sitio (por ejemplo).

Por supuesto, una función anónima puede asignarse a una variable, de manera que se puede usar como una función con nombre normal.

Hay mucha información en Internet sobre las funciones en javascript. Lo importante es que las funciones son datos, es decir:

Se puede pasar funciones como parámetros a otras funciones
Se pueden devolver funciones como resultado de otra función
Se puede asignar funciones a variables

etc.

2º. Sobre el with, no es recomendable usarlo demasiado (no quiere decir que no lo uses nunca, pero restringe su uso). Hay usos recomendables y otros que no. Puedes buscar más información con Google

3º. No funciona la segunda forma porque entra en juego una característica llamada closures. Es un tema un poco largo y complicado de explicar (o no sé como explicártelo bien). Te sugiero que leas algo sobre closures y lo entenderás.

Un saludo.

berkeleyPunk · #9 (**permalink**) 11/05/2013, 21:44

Cita:

Iniciado por alexg88

Buenas,
1º. La palabra clave function se usa sin nombre para crear una función anónima. Es una función normal pero sin nombre.
...

Ya le busqué y tienes razón alexg88, hay mucha información acerca de las funciones anónimas y los clousers. Según veo, estos dos temas ya salen de la programación básica u ordinaria y se acercan a ser temas avanzados o al menos semi-avanzados.

El código del efecto blink que aportas ya logré entenderlo (y de hecho, después de leer un poco de documentación acerca de los temas mencionados, tu código ya no se ven tan complicado).

Sin embargo, con mi mente aún principiante en JS, no dejo de pensar que dicho código da muchas vueltas, y que se puede hacer lo mismo sin emplear funciones anónimas (no lo he intentado, pero sin duda se ha de poder).

Gracias y hasta luego.

alexg88 · #10 (**permalink**) 12/05/2013, 07:17

El código en sí es muy simple y para el caso que aplica sí es necesario usar funciones anónimas. Son necesarias para poder realizar una función reutilizable.

Se puede realizar una función que sólo sirva para un elemento (pero no es reutilizable) y que no usa funciones anónimas en la parte del setInterval (aunque sí para asignar los eventos onmouseover y onmouseout)

Código Javascript:

Ver originalwindow.onload = function()
{    
    blink();
}
 
function blink_aux()
    {      
            var element = document.getElementById("textoParpadeante");
            element.style.visibility = (element.style.visibility == "visible") ? "hidden" : "visible";
    }
 
function blink()
{
    var id;
    
    id = setInterval(blink_aux, 500);
    
    element.onmouseover = function()
    {
        clearInterval(id);       
    }
    
    element.onmouseout = function()
    {
        id = setInterval(blink_aux, 500);
    }    
}

Si encuentras alguna otra forma, no dudes en ponerla.

Un saludo.

berkeleyPunk · #11 (**permalink**) 12/05/2013, 11:00

Cita:

Iniciado por alexg88

...es necesario usar funciones anónimas. Son necesarias para poder realizar una función reutilizable...

Cómo te digo, he leído un poco de documentación acerca de las funciones anónimas, y en algunos lugares encuentro esa misma idea que comentas (aunque nadie la explica), de que si quieres que una función sea reutilizable debes emplear funciones anónimas.

No logro entender el concepto de reutilizable, porque choca directamente con lo que yo entiendo por función. Ejemplo:

Código Javascript:

Ver originalfunction sumar(num1, num2)
{
    alert(num1+num2);
}
sumar(2,5);

Hasta donde sé, todas las funciones son reutilizables, en el sentido de que se les puede llamar una y otra vez para que hagan su tarea. El código de aquí arriba podría estar en un archivo externo y lo podríamos llamar desde cualquier documento web, utilizándolo y reutilizándolo.
Imagino que cuando tú dices que una función anónima sirve para hacer reutilizable dicha función, lo de "reutilizable" se refiere a una cosa distinta de la que yo hablo. A ver si puedes explicar a qué te refieres con reutilizable.

alexg88 · #12 (**permalink**) 12/05/2013, 11:16

No es que para que una función sea reutilizable sea necesario usar funciones anónimas, sino que para el caso que nos ocupa sí.

Te explico:

Código Javascript:

Ver originalwindow.onload = function()
{    
    blink(document.getElementById("textoParpadeante"));
    blink(document.getElementById("textoParpadeante2"));
}
 
function blink_aux(element)
    {      
            element.style.visibility = (element.style.visibility == "visible") ? "hidden" : "visible";
    }
 
//A la función le pasas el elemento que quieres que parpadee
function blink(element)
{
    var id;
    
    /*
Para poder referenciar el elemento en la llamada a la función auxiliar blink_aux, es necesario utilizar una función anónima que englobe la llamada a la función blink_aux. Esto es así, porque a la función setInterval se le pasa una referencia a una función (y al pasar una referencia -sólo la función en si- no puedes pasarle los parámetros). Para ello se usa una función anónima.
*/
    id = setInterval(function(){blink_aux(element);}, 500);
    
    element.onmouseover = function()
    {
        clearInterval(id);       
    }
    
    element.onmouseout = function()
    {
        id = setInterval(function(){blink_aux(element);}, 500);
    }    
}

EDITO:

No puedes pasarle id = setInterval( "blink_aux(element)", 500 ); porque la referencia a la variable element se pierde al salir de la función blink.
No ocurre esto mismo en la función anónima gracias a las closures (la referencia a element sigue viva a pesar de haber salido del ámbito de la función blink.

berkeleyPunk · #13 (**permalink**) 15/05/2013, 23:13

Cita:

Iniciado por alexg88

... ... ...

Ya salió otra bronca.

Si ejecutamos el código que propones en local, funciona bien, hace lo que uno espera que haga, a saber, el texto parpadea, cuando se pone el cursor encima se detiene y cuando se quita el cursor reinicia el parpadeo. Pero en línea tiene efectos extraños según lo visualices en Firefox y en IE.

Checa: http://e-trainer.byethost4.com/joomla/

Cuál sería tu diagnóstico de este problema?

alexg88 · #14 (**permalink**) 16/05/2013, 13:03

Buenas,

Te falta una cosa en el código.

Código Javascript:

Ver originalwindow.onload = function()
{
    blink( document.getElementById("ojo") );
}
 
function blinkAuxiliar(objParpadeante)
{
    objParpadeante.style.visibility = (objParpadeante.style.visibility == "visible")?"hidden":"visible";
}
 
function blink(objParpadeante)
{
    var idDelIntervalo;
    
    idDelIntervalo = setInterval(function(){blinkAuxiliar(objParpadeante)}, 500);
    
    objParpadeante.onmouseover = function()
    {
        clearInterval(idDelIntervalo);
    }
    
    objParpadeante.onmouseout = function()
    {
        idDelIntervalo= setInterval(function(){blinkAuxiliar(objParpadeante)}, 500);
    }
}

En concreto en esta parte:

objParpadeante.onmouseout = function()
{
idDelIntervalo= setInterval(function(){blinkAuxiliar(objParpadeant e)}, 500);
}

Un saludo.