JQuery OnClick Execution
-
02-07-2019 - |
Pergunta
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);
});
Solução
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;
});
Outras dicas
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.
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;
});
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