JQuery OnClick Execution

Question

Eu tenho esse pouco de JavaScript escrito com o jQuery 1.2.5. Está contido na função principal () de um plugin que escrevi. O plug -in é um rolador da galeria horizontal muito semelhante ao JCAROUSEL. Ele faz muitas calculações automáticas de larguras e determina quantos rolam com base nisso e no tamanho das imagens, que é o que todos os cálculos estão acontecendo.

Qual é a minha pergunta: como evito que isso dispare antes que uma execução anterior seja concluída. Por exemplo, se eu tiver um pouco de clique feliz e apenas amassado freneticamente .digi_next. As coisas não vão tão bem na interface do usuário quando isso acontece e eu gostaria de consertar :) Eu pensei que a resposta poderia estar queue, mas todas as minhas tentativas de usá -lo não fizeram nada a 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

Basta usar uma bandeira ocupada global. Ao inserir o manipulador de cliques, verifique -o e prossiga apenas se for false. Defina -o imediatamente como true e, em seguida, coloque -o novamente quando a animação terminar. O JavaScript é um único thread, então não há condição de corrida para se preocupar.

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

Answer 2

Dar uma olhada em JQuery UI. Especificamente a parte de efeitos do plug-in. Eu uso o efeito slide Meu site pessoal (Clique nas setas nas laterais das caixas).

Evito que os usuários acionem o efeito mais de uma vez - antes que o efeito termine - com o 1 Manador de eventos e uma função de retorno de chamada.

Aqui está o código de origem

Answer 3

Como uma alternativa à bandeira global ardilizada, você pode atribuir o valor ao elemento DOM, para que vários elementos na página tenham o mesmo comportamento:

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

Answer 4

Como as chamadas de funções do JavaScript são assíncronas, você pode passar como um parâmetro uma função de retorno de chamada que é chamada quando a chamada anterior termina (o mesmo para erros).

Você pode passar a função que escreveu nesta postagem como o retorno de chamada para a função que o fogo antes.

Espero que isto ajude.

Cumprimentos