4

Tenho em meus sistemas uma chamada para uma função de e sempre funcionou. É uma função para exibir/esconder uma imagem de carregando para o usuário. O problema é que as vezes eu tenho que chamar essa função em uma ação do usuário de um campo select, por exemplo, e caso o usuário fique altere 10 vezes seguidas esse campo select irá fazer 10 chamadas, o que não tem problemas, mas é ruim para o usuário ficar aparecendo ainda a imagem pois ele fica carregando e sumindo as 10 vezes.

Segue um exemplo para melhor entendimento do que estou dizendo.

Nesse caso não é nenhuma ação que demore para executar, mas por eu ter muitas chamadas de ajax que podem demorar um pouco mais, daí a necessidade de eu exibir para o usuário que esta carregando.

Meu código:

$(document).ready(function() {  
     $("select[name=meuSelect]").change(function(event) {
         event.preventDefault();

         var valor = $(this).val();

         ajaxLoadAni('In');     
         $("#valor").text(valor);     
         ajaxLoadAni('Out');
     });
});


function ajaxLoadAni(inOut) {
    'use strict';

    if (inOut === 'In') {
      $('#ajaxLoadAni').fadeIn('slow'); //EXIBE A IMAGEM DE CARRREGANDO
    } else {
        $('#ajaxLoadAni').fadeOut('slow'); //ESCONDE A IMAGEM DE CARRREGANDO
    }
}

Exemplo funcionando no JSFiddle

8
  • Será que poderia mostrar o código relevante?
    – Tivie
    Commented 13/03/2014 às 14:00
  • Esta ali o link jsfiddle.net/QZ9q8/1 de todo código @Tivie Commented 13/03/2014 às 14:01
  • Obrigado, não tinha visto
    – Tivie
    Commented 13/03/2014 às 14:02
  • Sem crise... caso vá alterando o select com as setas do teclado fica mais fácil de entender. Commented 13/03/2014 às 14:03
  • 1
    Um stop da animação antes do fadeIn resolveria? jsfiddle.net/QZ9q8/2
    – bfavaretto
    Commented 13/03/2014 às 14:09

2 Respostas 2

5

Você pode resolver isto facilmente parando a animação utilizando .stop() antes de dar .fadeOut() e pode ficar melhor ainda se você também dar um .stop() no .fadeIn() também pois eu realizei alguns testes e se você trocar muito rapidamente você percebe que a animação se repetiu uma vez, por isso:

Você estava utilizando fadeIn() e fadeOut() sem parada:

$('#ajaxLoadAni').fadeIn('slow'); //EXIBE A IMAGEM DE CARRREGANDO
$('#ajaxLoadAni').fadeOut('slow'); //ESCONDE A IMAGEM DE CARRREGANDO

Adicionando uma parada ficaria assim:

$('#ajaxLoadAni').stop(true,true).fadeIn('slow'); //EXIBE A IMAGEM DE CARRREGANDO    
$('#ajaxLoadAni').stop(true,true).fadeOut('slow'); //ESCONDE A IMAGEM DE CARRREGANDO

Desta forma você irá parar a animação anterior antes de sair, assim não tendo que mostrar/esconder várias vezes para o usuário.

Detalhe importante sobre a função stop():

Os parâmetros da função .stop() servem para limpar a fila de animações e também finaliza-las, que seriam:

stop([clearQueue],[jumpToEnd])

[clearQueue] - Caso true, indica que a animação deve ser removida da fila.(default false). [jumpToEnd] - Caso true, indica que a animação deve ser completada imediatamente.(default false).

Exemplo funcionando no JSFiddle

Referência

7
  • O que faz o false, true que você passou como parâmetro? Eu havia pensado em um stop no fadeIn pois ele só teria efeito caso já houvesse um fadeOut em andamento.
    – bfavaretto
    Commented 13/03/2014 às 14:23
  • @Paulo, me diga uma coisa, nesse caso qual a diferença em si. E pelo que pude perceber no fadeOut não funcionou Commented 13/03/2014 às 14:27
  • E o que melhor funcionou foi $('#ajaxLoadAni').stop( true, true ).fadeIn('slow'); Commented 13/03/2014 às 14:30
  • editei a resposta te explicando @bfavaretto Commented 13/03/2014 às 14:31
  • 1
    Valeu, agora entendi.
    – bfavaretto
    Commented 13/03/2014 às 14:34
3

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...

  1. Accelerar a animação. Em vez de "slow" usar "fast" ou especificar os milisegundos directamente (slow é 600ms, fast é 200ms)

  2. 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.

1
  • é quase que isso mesmo que você descreveu. Agora vamos lá: Eu até poderia sim ter colocado "fast" (tanto que na função real minha isso esta como parametro, só deixei o mais limpo possível) mas não deixei pois o interessante já que é uma chamada ajax foi preferível deixar no slow mesmo, e também poderia usar o show e hide, mas da mesma forma foi escolhido ter a animação. E sim, isso pode acontecer de ter as 2500 chamadas, infelizmente, se tiver algo para isso tbm ajuda. E valew mesmo pelos comentários Commented 13/03/2014 às 14:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .