Como você lida com ícones ocupados em um site de AJAX?

votos
2

Esta pergunta lida com problemas de concorrência, para obter sugestões sobre como exibir um ícone de ocupado ver esta pergunta: Javascript - carga / indicador de ocupado ou div transparente sobre página no evento clique

Quando um usuário inicia um pedido de AJAX em uma página é útil para mostrar algum tipo de trabalho ou o ícone ou o progresso indicador de ocupado. Se há apenas um processo de longa duração isso pode ser tratado de uma maneira relativamente simples:

function do_action() {
   show_busy_icon();       

   long_running_asynchronous_process(function() {
      // Callback function run when process finishes
      hide_busy_icon();
   });
}

No entanto, se vários processos assíncronos estão em execução na página, usando on / off métodos não iria funcionar. O primeiro processo terminar desliga o ícone, embora existam processos adicionais em execução.

Então, como você lida com exibindo um indicador, em uma página da web, que é quando há um ou mais processos em execução, e desliga quando não há processos em execução?

I imaginar que seria possível manter uma contagem do número de processos em execução. hide_busy_icon()apenas oculta o ícone se a contagem de processo é 0. Isso parece meio propenso a falhas. Talvez haja uma maneira melhor / mais simples que eu não estou vendo.

Obrigado por suas idéias e sugestões!

Edit: Depois de trabalhar com a solução na resposta marcada por um tempo, eu estou feliz em dizer que funciona muito bem. O único problema que tenho que correr para os casos onde meus próprios scripts chamam funções de roteiros que não controlamos. A menos que essas funções permitem chamadas de retorno a ser fornecida não há nenhuma maneira de atualizar o processo de contagem de quando eles começam e terminam.

Um exemplo de onde isso pode ocorrer é a adição de um conjunto de marcadores para um mapa do Google. Uma vez que o meu script chama os mapas do Google funcionar o ícone ocupado desaparece, enquanto os marcadores ainda estão sendo carregados.

Eu não tenho certeza de uma boa maneira de lidar com isso.

Publicado 09/12/2008 em 19:28
fonte usuário
Em outras línguas...                            


6 respostas

votos
8

Se você deseja que o mesmo indicador ocupado por todas as ações, em seguida, usar um contador.

Em vez de "show_busy_icon ()", fazer um "increment_busy_count ()", que chama de "show_busy_icon ()" se a contagem de ocupado vai de 0 a 1. Em vez de "hide_busy_icon ()", fazer um "decrement_busy_count ()", que chama "hide_busy_icon ()" se a contagem de ocupado vai de 1 a 0.

Respondeu 09/12/2008 em 19:47
fonte usuário

votos
1

Prototype tem este built-in; uma propriedade chamada Ajax.activeRequestCountmantém o controle de quantas solicitações são ativos em um determinado momento. Ele também vai deixar você configurar respondedores globais Ajax para determinar se deve ocultar ou exibir o ícone "ocupado".

Respondeu 09/12/2008 em 21:34
fonte usuário

votos
1

Acho que o problema é realmente que você está usando apenas um indicador. Pode ser mais fácil ter um indicador para cada ação que precisa de um.

Então, se você tiver várias pesquisas em uma página de cada área de busca teria seu próprio indicador independente que é mostrado ou escondido nas funções JavaScript apropriadas.

Respondeu 09/12/2008 em 19:40
fonte usuário

votos
0

Estamos todos olhando para o caminho errado. chamadas Ajax são usados ​​para carregar o conteúdo usando o XHR. Isto significa que tem que haver algum elemento predefinido em todo o DOM em que o conteúdo é carregado. dizer que temos um html deste tipo:

<html>
<body>
   <div id="content_1">
   </div>
   <div id="content_2">
   </div>
</body>
</html>

Usando jQuery, dizer que nós queremos carregar em content_1 e content_2 de content_1.php e content_2.php respectivamente.

Use o seguinte script para lidar com o ajax ::

$("content_1").html("<img src='loading.gif'>").load("http://samplesite.com/content_1.php");

$("content_2").html("<img src='loading.gif'>").load("http://samplesite.com/content_2.php");

Isto irá colocar um gif carregamento nos respectivos divs e o gif será posteriormente substituído pelo conteúdo carregado a partir do php. script de uma linha simples. No balcão necessário.

Requisito: qualquer versão mais recente do jQuery.

Respondeu 31/12/2012 em 10:18
fonte usuário

votos
0

Proponho uma solução diferente. este não é testado código, provavelmente não vai funcionar, mas é uma ilustração do conceito.

Presumo que a mesma ação exata não é executado em várias instâncias. Eu faço isso para garantir que o tempo limite ou problemas semelhantes em comunicação não pendurar o indicador, mas permite que o indicador a ser resolvido quando a comunicação é restabelecida

 var actionRegister = new Array();

 function register_action(actionId)
 {
     show_busy_icon();       
     if(blockedTile.indexOf(actionId) != -1)
     {  // element already registered
        return;
     }
     actionRegister.push(actionId)
}


function unregister_action(actionId)
{
    var idx = blockedTile.indexOf(actionId);
    if(idx  != -1)
    {  
        actionRegister.splice(idx,1);
    }

    if(actionRegister.length < 1)
    {
       hide_busy_icon();
    }
}
Respondeu 18/04/2012 em 10:03
fonte usuário

votos
0

Por favor, veja a minha resposta aqui:

Como exibir uma tela de carregamento, enquanto cargas de conteúdo de site

Dou um pequeno, trabalhando exemplo JavaScript de como fazer exatamente isso, espero que ajude.

Respondeu 09/12/2008 em 19:40
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more