ejecución de jQuery onClick

Question

Tengo este fragmento de javascript escrito con jQuery 1.2.5.Está contenido dentro de la función principal() de un complemento que escribí.El complemento es un desplazamiento de galería horizontal muy similar a jCarousel.Realiza muchos cálculos automáticos de anchos y determina cuántos desplazarse en función de eso y del tamaño de las imágenes, que es lo que son todos los cálculos que se realizan.

Mi pregunta es: ¿cómo puedo evitar que esto se active antes de que finalice una ejecución anterior?Por ejemplo, si hago un pequeño clic feliz y aprieto frenéticamente .digi_next.Las cosas no van tan bien en la interfaz de usuario cuando eso sucede y me gustaría arreglarlo :) Pensé que la respuesta podría estar en queue, pero todos mis intentos de usarlo no han resultado en nada que valga la pena.

    var self = this;
    $(".digi_next", this.container).click(function(){

        var curLeft = $(".digi_container", self.container).css("left").split("px")[0];
        var newLeft = (curLeft*1) - (self.containerPad + self.containerWidth) * self.show_photos;

        if (newLeft < ((self.digi_gal_width - (self.containerPad + self.containerWidth) * self.show_photos)) * -1) {
            newLeft = ((self.digi_gal_width - (self.containerPad + self.containerWidth) * self.show_photos)) * -1;
        }

        $(".digi_container", self.container).animate({
            left: newLeft + "px"
        }, self.rotateSpeed);
    });

Answer 1

Simplemente use una bandera de ocupado global.Cuando ingrese su controlador de clics, verifíquelo y solo continúe si es falso.Configúrelo inmediatamente en verdadero y luego vuelva a establecerlo en falso cuando finalice la animación.JavaScript es de un solo subproceso, por lo que no hay que preocuparse por ninguna condición de carrera.

var busy = false;
$("...").onclick(function() {
    if (busy) return false;
    busy = true;
    $("...").animate(..., ..., ..., function() {
        busy= false;
    });
    return false;
});

Answer 2

Echa un vistazo a interfaz de usuario jQuery.Específicamente la parte de efectos del enchufe.Yo uso el efecto de diapositiva en mi sitio web personal (haga clic en las flechas a los lados de los cuadros).

Evito que los usuarios activen el efecto más de una vez (antes de que finalice) con el uno controlador de eventos y una función de devolución de llamada.

Aquí está el código fuente.

Answer 3

Como alternativa a la bandera global antes mencionada, puede asignar el valor al elemento DOM, permitiendo de esa manera que múltiples elementos en la página tengan el mismo comportamiento:

$("...").onclick(function(el) {
    var self = el;
    if (self.busy) return false;
    self.busy = true;
    $("...").animate(..., ..., ..., function() {
        self.busy= false;
    });
    return false;
});

Answer 4

Dado que las llamadas a funciones de JavaScript son asíncronas, puede pasar como parámetro una función de devolución de llamada que se llama cuando finaliza la llamada anterior (lo mismo ocurre con los errores).

Puede pasar la función que escribió en esta publicación como devolución de llamada para la función que se activó antes.

Espero que esto ayude.

Saludos