Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de ¿cómo hacer que se pare una función mediante un evento? en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/05/2013, 12:34
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 556
Antigüedad: 7 años, 1 mes
Puntos: 21
Sonrisa ¿cómo hacer que se pare una función mediante un evento?

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 original
  1. function parpadear()
  2.     {
  3.         with ( document.getElementById("textoParpadeante").style )
  4.         {
  5.             visibility = (visibility == "visible")?"hidden":"visible";
  6.         }
  7.     }

Ahora aplicamos esta función a un link:

Código HTML:
Ver original
  1. <body onload='setInterval("parpadear()", 500);'>
  2.  
  3. <a href="#" id="textoParpadeante">Este link no debe parpadear cuando tiene el cursor encima!</a>
  4. </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?

  #2 (permalink)  
Antiguo 08/05/2013, 16:14
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 9 años
Puntos: 344
Respuesta: ¿cómo hacer que se pare una función mediante un evento?

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.
  #3 (permalink)  
Antiguo 08/05/2013, 16:21
Avatar de chwc  
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires ! :D
Mensajes: 814
Antigüedad: 11 años, 8 meses
Puntos: 103
Respuesta: ¿cómo hacer que se pare una función mediante un evento?

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/
__________________
Hangouts de JavaScript todos los jueves 20hs GMT, Unite !
https://plus.google.com/u/0/108504944676960830886

Última edición por chwc; 08/05/2013 a las 16:39
  #4 (permalink)  
Antiguo 08/05/2013, 21:08
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 556
Antigüedad: 7 años, 1 mes
Puntos: 21
De acuerdo Respuesta: ¿cómo hacer que se pare una función mediante un evento?

Cita:
Iniciado por alexg88 Ver Mensaje
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
  #5 (permalink)  
Antiguo 08/05/2013, 21:20
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 556
Antigüedad: 7 años, 1 mes
Puntos: 21
Respuesta: ¿cómo hacer que se pare una función mediante un evento?

Cita:
Iniciado por chwc Ver Mensaje
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
  #6 (permalink)  
Antiguo 09/05/2013, 12:55
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 9 años
Puntos: 344
Respuesta: ¿cómo hacer que se pare una función mediante un evento?

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.
  #7 (permalink)  
Antiguo 09/05/2013, 20:09
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 556
Antigüedad: 7 años, 1 mes
Puntos: 21
Respuesta: ¿cómo hacer que se pare una función mediante un evento?

Cita:
Iniciado por alexg88 Ver Mensaje
...
...
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 original
  1. window.onload = function()
  2. {
  3.    funcionA();
  4.    funcionB();
  5.    funciónC();
  6. }
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 original
  1. id = setInterval( function(){blink_aux(element);}, 500 );

¿No sería más sencillo hacerlo así?:
Código Javascript:
Ver original
  1. id = 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?

Última edición por berkeleyPunk; 09/05/2013 a las 20:35
  #8 (permalink)  
Antiguo 10/05/2013, 12:54
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 9 años
Puntos: 344
Respuesta: ¿cómo hacer que se pare una función mediante un evento?

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.
  #9 (permalink)  
Antiguo 11/05/2013, 21:44
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 556
Antigüedad: 7 años, 1 mes
Puntos: 21
De acuerdo Respuesta: ¿cómo hacer que se pare una función mediante un evento?

Cita:
Iniciado por alexg88 Ver Mensaje
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.
  #10 (permalink)  
Antiguo 12/05/2013, 07:17
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 9 años
Puntos: 344
Respuesta: ¿cómo hacer que se pare una función mediante un evento?

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 original
  1. window.onload = function()
  2. {    
  3.     blink();
  4. }
  5.  
  6. function blink_aux()
  7.     {      
  8.             var element = document.getElementById("textoParpadeante");
  9.             element.style.visibility = (element.style.visibility == "visible") ? "hidden" : "visible";
  10.     }
  11.  
  12. function blink()
  13. {
  14.     var id;
  15.    
  16.     id = setInterval(blink_aux, 500);
  17.    
  18.     element.onmouseover = function()
  19.     {
  20.         clearInterval(id);      
  21.     }
  22.    
  23.     element.onmouseout = function()
  24.     {
  25.         id = setInterval(blink_aux, 500);
  26.     }    
  27. }

Si encuentras alguna otra forma, no dudes en ponerla.

Un saludo.
  #11 (permalink)  
Antiguo 12/05/2013, 11:00
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 556
Antigüedad: 7 años, 1 mes
Puntos: 21
Respuesta: ¿cómo hacer que se pare una función mediante un evento?

Cita:
Iniciado por alexg88 Ver Mensaje
...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 original
  1. function sumar(num1, num2)
  2. {
  3.     alert(num1+num2);
  4. }
  5. 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.
  #12 (permalink)  
Antiguo 12/05/2013, 11:16
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 9 años
Puntos: 344
Respuesta: ¿cómo hacer que se pare una función mediante un evento?

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 original
  1. window.onload = function()
  2. {    
  3.     blink(document.getElementById("textoParpadeante"));
  4.     blink(document.getElementById("textoParpadeante2"));
  5. }
  6.  
  7. function blink_aux(element)
  8.     {      
  9.             element.style.visibility = (element.style.visibility == "visible") ? "hidden" : "visible";
  10.     }
  11.  
  12. //A la función le pasas el elemento que quieres que parpadee
  13. function blink(element)
  14. {
  15.     var id;
  16.    
  17.     /*
  18. 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.
  19. */
  20.     id = setInterval(function(){blink_aux(element);}, 500);
  21.    
  22.     element.onmouseover = function()
  23.     {
  24.         clearInterval(id);      
  25.     }
  26.    
  27.     element.onmouseout = function()
  28.     {
  29.         id = setInterval(function(){blink_aux(element);}, 500);
  30.     }    
  31. }

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.
  #13 (permalink)  
Antiguo 15/05/2013, 23:13
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 556
Antigüedad: 7 años, 1 mes
Puntos: 21
Sonrisa Respuesta: ¿cómo hacer que se pare una función mediante un evento?

Cita:
Iniciado por alexg88 Ver Mensaje
... ... ...
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?
  #14 (permalink)  
Antiguo 16/05/2013, 13:03
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 9 años
Puntos: 344
Respuesta: ¿cómo hacer que se pare una función mediante un evento?

Buenas,

Te falta una cosa en el código.

Código Javascript:
Ver original
  1. window.onload = function()
  2. {
  3.     blink( document.getElementById("ojo") );
  4. }
  5.  
  6. function blinkAuxiliar(objParpadeante)
  7. {
  8.     objParpadeante.style.visibility = (objParpadeante.style.visibility == "visible")?"hidden":"visible";
  9. }
  10.  
  11. function blink(objParpadeante)
  12. {
  13.     var idDelIntervalo;
  14.    
  15.     idDelIntervalo = setInterval(function(){blinkAuxiliar(objParpadeante)}, 500);
  16.    
  17.     objParpadeante.onmouseover = function()
  18.     {
  19.         clearInterval(idDelIntervalo);
  20.     }
  21.    
  22.     objParpadeante.onmouseout = function()
  23.     {
  24.         idDelIntervalo= setInterval(function(){blinkAuxiliar(objParpadeante)}, 500);
  25.     }
  26. }

En concreto en esta parte:

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


Un saludo.

Etiquetas: mediante
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




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