Animación jQuery: Ignorar haga doble clic

Question

Tengo una animación jQuery simple que mueve un div a la derecha oa la izquierda, en un evento .click().

Sin embargo, si el usuario hace clic dos veces en el evento, se dispara dos veces, lo que daña el formato.

Aquí está un ejemplo de lo que tengo:

$('a#right').click(function() { 

if ($(this).is(':visible')) { 

    $('#slide').animate({right: '+=257'}, 400, function() { 
    slide_button(); 
    }); 

    } 
}); 

La función slide_button() comprobará para ver si la posición de la div está dentro de límites aceptables para el punto de vista del usuario. Si es así, permitirá que el botón derecho o izquierdo sea visible. Si está fuera de los límites, ocultará los botones.

Funciona bien, excepto si hago clic dos veces, entonces se deslizará justo fuera de la página.

¿Hay alguna manera de trabajar con esto para ignorar los clics dobles?

Answer 1

Sólo comprobar si el elemento ya está animando:

$('a#right').click(function() { 
    if ($(this).is(':visible') && !$('#slide').is(':animated')) { 
     $('#slide').animate({right: '+=257'}, 400, function() { 
      slide_button(); 
     }); 
    } 
});  

Answer 2

Usted podría .unbind() el evento click vez hace clic en lo que evitará que se ejecute varias veces:

$('a#right').click(function() { 
    $(this).unbind('click'); 
    ... 
}); 

Una vez que se completa la animación se podía volver a enlazar si tiene que ser capaz de hacer clic de nuevo.

Answer 3

normalmente evitar esto mediante el establecimiento de una variable global y ejecutar un si como

clicked = true; 
$(div).click(function(){ 
    if (!clicked){ 
     clicked = true; 
     Your function with a callback setting clicked to false 
    } 
    .... 
}) 

Answer 4

Puede utilizar one() en jQuery:

$('a#right').one("click", function() { 
    slide($(this)); 
}); 

function slide(obj) { 
    if (obj.is(':visible')) { 
     $('#slide').animate({right: '+=257'}, 400, function() { 
      slide_button(); 
      $('a#right').one("click", function() { 
       slide($(this)); 
      } 
     }); 
} 

Después de completar la animación, el evento click está ligado al li nk nuevamente y se puede ejecutar a lo sumo una vez.