Questão do OP:
Pelo que percebi, os passos da sua aplicação (num contexto real) são os seguintes:
- Utilizador selecciona uma opção no menu
- A imagem de loading é activada
- É feito um pedido de AJAX
- No success callback do AJAX a imagem de loading é desactivada
O seu problema é que, por vezes, o utilizador muda a selecção mais rápidamente do que a animação.
Em termos de experiência do utilizador, tem algumas soluções relativamente simples...
Accelerar a animação. Em vez de "slow" usar "fast" ou especificar os milisegundos directamente (slow é 600ms, fast é 200ms)
Usar show()
e hide()
em vez de fadeIn
e fadeOut
. Deixa de ter animação e passa a ser instantâneo.
Outra maneira, um pouco mais complexa seria escutar o evento ajaxStop.
Este evento é disparado quando não existem mais pedidos de AJAX na pilha.
$( document ).ajaxStop(function() {
ajaxLoadAni('Out');
});
Assim, só quando todos os pedidos de ajax terminarem é que a animação é escondida. Se aliar isto a uma das soluções que apresentei ou à sugestão sugerida pelo Paulo Roberto, a experiência do utilizador melhora.
Problema dos multiplos pedidos:
No entanto, assumindo que a esquematização que fiz dos passos da sua aplicação está correcta, existe um problema maior, que é o número de chamadas AJAX que podem ser disparadas quase em simultâneo.
Por exemplo, se o utilizador utilizar as setas para mudar o select e carregar alternadamente na tecla de cima e na tecla de baixo 25 vezes, terá 25 pedidos de AJAX quase simultâneos, num curtíssimo espaço de tempo. Se o fizer 2500 vezes... imagine.
Solução para o problema dos multiplos pedidos:
A solução mais simples (e mais limpa) seria adicionar um botão que chamasse a função que faz o pedido AJAX, em vez de escutar o "change" event do "select"
$('.ajaxBtn').click(function () {
//Chamar ajax aqui
});
Também pode desactivar o select enquanto o pedido de ajax não terminou, mas isso pode piorar a experiência do utilizador.
Outra forma, para manter a interface como está, seria colocar uma "flag" que impedisse multiplos AJAX requests de dispararem ao mesmo tempo e só quando o anterior estivesse resolvido é que aceitaria um novo.
var ajaxFlag = false;
$("select[name=meuSelect]").change(function(event) {
event.preventDefault();
var valor = $(this).val();
if (ajaxFlag === false) {
ajaxLoadAni('In');
ajaxFlag = true;
//Funcao AJAX
$.ajax()
.success(function() //Quando é bem sucessida
{
$("#valor").text(valor);
})
//.error() //QUando dá erro
.complete(function() //é sempre chamada
{
ajaxLoadAni('Out');
ajaxFlag = false;
})
}
});
O problema desta solução é que desincroniza o menu select, isto é, se eu mudar rapidamente de opção, ele vai ignorar a segunda opção e mostrar só a primeira, ainda que no menu select esteja selecciona a segunda.
Tem também a opção de dar um delay entre a selecção e o pedido de ajax.
stop
da animação antes do fadeIn resolveria? jsfiddle.net/QZ9q8/2