Evitar que una función se repita

[liranan]

Hola!

Mi problema es el siguiente.

Tengo varias funciones que cumplen su cometido pero se repiten en ciertas condiciones.
Una función es para desplegar un menú al pasar el ratón sobre una imagen, la otra es hacer un scroll del body al hacer click sobre cierto texto.

Pongo el ejemplo del scrollTop:

Código jquery:

$('.trigger').click(function(e){
                e.preventDefault();
                $("body", "html").animate({
                        scrollTop: $(this).offset().top
                }, 600);
        });
 

Al cargar la página y hacer click sobre el gatillo concreto, se realiza la acción, el scroll baja hasta el punto deseado. Sin embargo, si una vez con la página ya en la posición correcta vuelvo a hacer click sobre el gatillo (una o varias veces), al intentar hacer scroll hacia arriba, la acción se ejecuta como si se quedara almacenada y esperara a poder ser ejecutada.

Lo mismo me ocurre con el menú desplegable, funciona, pero si paso varias veces el ratón sobre la imagen el menú comienza a abrirse y cerrarse un montón de veces.

Lo que me gustaría hacer es evitar esas repeticiones, que esas funciones no se quedaran en "stand by" esperando a ser ejecutadas sino que, si ya se han ejecutado o no hace falta ejecutarlas, se descartaran.

Espero haberme explicado bien.
Gracias.
Gonzalo.

[Alexis88]

Necesitas utilizar el método stop.

Saludos

[liranan]

Gracias por la respuesta Alexis88, pero no consigo que me funcione correctamente.

La función ya no se ejecuta varias veces, pero ahora no muestra la animación sino que se coloca directamente en el final. Al ser un scroll, el efecto es similar a si usara un ancla de html normal y corriente.

El código ahora es este:

Código jquery:

$('.circle-image, .square-title').click(function(e){
                e.preventDefault();
                $("body", "html").animate({
                        scrollTop: $(this).offset().top
                }, 600);
                $("body", "html").stop(true, true);
        });
 

¿Alguna sugerencia?
Gracias

[fede5426]

Código Javascript:

$('.circle-image, .square-title').click(function(e){
                e.preventDefault();
                $("body", "html").stop(true).animate({
                        scrollTop: $(this).offset().top
                }, 600);
        });
 

Probalo asi

[Alexis88]

El método se debe de aplicar antes de la animación. Revisa los ejemplos del enlace que te dejé.

Saludos