¿Cómo se manejan los iconos ocupados en un sitio AJAX?

votos
2

Esta pregunta trata sobre los problemas de concurrencia, para obtener sugerencias sobre cómo mostrar un ícono ocupado, vea esta pregunta: Javascript : indicador de carga / ocupado o página transparente sobre página en el clic del evento

Cuando un usuario inicia una solicitud de AJAX en una página, es útil mostrar algún tipo de ícono de trabajo u ocupado o indicador de progreso. Si solo hay un proceso de larga ejecución, esto se puede manejar de una manera relativamente directa:

function do_action() {
   show_busy_icon();       

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

Sin embargo, si se ejecutan varios procesos asíncronos en la página, no sería posible utilizar los métodos de activación / desactivación. El primer proceso para terminar apaga el ícono a pesar de que hay procesos adicionales en ejecución.

Entonces, ¿cómo maneja la visualización de un indicador, en una página web, que está activado cuando hay uno o más procesos en ejecución, y desactivado cuando no hay procesos en ejecución?

Me imagino que sería posible mantener un recuento de la cantidad de procesos en ejecución. hide_busy_icon()solo oculta el ícono si el recuento del proceso es 0. Parece un poco propenso al fracaso. Tal vez hay una forma mejor / más simple que no estoy viendo.

Gracias por tus ideas y sugerencias!

Editar: Después de trabajar con la solución en la respuesta marcada por un tiempo, me complace decir que funciona muy bien. El único problema con el que me he encontrado es que mis propios scripts llaman funciones de scripts que no controlo. A menos que esas funciones permitan el suministro de devoluciones de llamadas, no hay forma de actualizar el conteo del proceso cuando comienzan y terminan.

Un ejemplo de dónde puede ocurrir esto es agregar un conjunto de marcadores a un mapa de Google. Una vez que mi secuencia de comandos llama a la función de mapas de Google, el icono de ocupado desaparece, mientras que los marcadores todavía se están cargando.

No estoy seguro de una buena manera de manejar esto.

Publicado el 09/12/2008 a las 19:28
fuente por usuario
En otros idiomas...                            


6 respuestas

votos
8

Si desea el mismo indicador de ocupado para todas las acciones, utilice un contador.

En lugar de "show_busy_icon ()", haga un "increment_busy_count ()", que llama "show_busy_icon ()" si el conteo ocupado va de 0 a 1. En lugar de "hide_busy_icon ()", haga un "decrement_busy_count ()", que llama "hide_busy_icon ()" si el conteo ocupado va de 1 a 0.

Respondida el 09/12/2008 a las 19:47
fuente por usuario

votos
1

El prototipo tiene esto incorporado; una propiedad llamada Ajax.activeRequestCountrealiza un seguimiento de cuántas solicitudes están activas en un momento determinado. También te permitirá configurar respondedores Ajax globales para determinar si ocultar o mostrar el ícono de "ocupado".

Respondida el 09/12/2008 a las 21:34
fuente por usuario

votos
1

Creo que el problema es que estás usando solo un indicador. Puede ser más fácil tener un indicador para cada acción que necesita uno.

Por lo tanto, si tiene varias búsquedas en una página, cada área de búsqueda tendrá su propio indicador independiente que se muestra u oculta en las funciones de JavaScript adecuadas.

Respondida el 09/12/2008 a las 19:40
fuente por usuario

votos
0

Todos estamos en el camino equivocado. llamadas Ajax se utilizan para cargar contenido mediante el XHR. Esto significa que tiene que haber algún elemento predefinido en todo el DOM donde se carga el contenido. decir que tenemos un html de este tipo:

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

Usando jQuery, decimos que queremos cargar en content_1 y content_2 de content_1.php y content_2.php respectivamente.

Utilice la siguiente secuencia de comandos para manejar el 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");

Esto colocará un gif de carga en los respectivos divs y el gif será posteriormente sustituido por el contenido cargado desde el php. escritura de una línea simple. No se requiere contador.

Requisito: cualquier versión más reciente de jQuery.

Respondida el 31/12/2012 a las 10:18
fuente por usuario

votos
0

Propongo una solución diferente. esto no se ha probado el código, probablemente no funcionará, pero es una ilustración del concepto.

Asumo la misma acción de excact no se ejecuta en varias instancias. Hago esto para asegurar que los tiempos de espera o problemas similares en la comunicación no se cuelga el indicador, pero permite que el indicador de resolverse cuando se restablezca la comunicación

 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();
    }
}
Respondida el 18/04/2012 a las 10:03
fuente por usuario

votos
0

Por favor mira mi respuesta aquí:

Cómo mostrar una pantalla de carga mientras se carga el contenido del sitio

Doy un ejemplo pequeño y funcional de JavaScript sobre cómo hacer exactamente esto, espero que ayude.

Respondida el 09/12/2008 a las 19:40
fuente por usuario

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