Come si fa a gestire le icone impegnati in un sito AJAX?

voti
2

Questa domanda riguarda problemi di concorrenza, per suggerimenti su come visualizzare un'icona occupato vedere questa domanda: Javascript - carico / indicatore di occupato o div trasparente sopra pagina su evento click

Quando un utente avvia una richiesta AJAX in una pagina è utile per mostrare un qualche tipo di lavoro o indicatore di icona o il progresso occupato. Se v'è un solo processo di lunga durata questo può essere gestito in modo relativamente semplice:

function do_action() {
   show_busy_icon();       

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

Tuttavia, se più processi asincroni sono in esecuzione sulla pagina, utilizzando su metodi / off non avrebbe funzionato. Il primo processo di finire spegne l'icona anche se ci sono altri processi in esecuzione.

Quindi, come si fa a gestire la visualizzazione di un indicatore, su una pagina web, cioè quando ci sono uno o più processi in esecuzione, e si spegne quando non ci sono processi in esecuzione?

Immagino che sarebbe stato possibile mantenere un conteggio del numero di processi in esecuzione. hide_busy_icon()nasconde solo l'icona se il conteggio processo è 0. Questo sembra un pò incline al fallimento. Forse c'è un / modo migliore più semplice che io non sto vedendo.

Grazie per le vostre idee e suggerimenti!

Edit: Dopo aver lavorato con la soluzione nella risposta marcata per un po ', sono felice di dire che funziona molto bene. L'unico problema che ho incontrato sono casi in cui i miei script chiamano le funzioni di script non mi controllo. A meno che queste funzioni permettono di callback da fornire non c'è modo di aggiornare il processo di conteggio quando cominciano e finiscono.

Un esempio di dove si verifica questo lattina è l'aggiunta di una serie di marcatori ad una mappa di Google. Una volta che il mio script chiama le mappe di Google funzionano l'icona occupato scompare, mentre i marcatori sono ancora in corso di caricamento.

Non sono sicuro di un buon modo per gestire questa situazione.

È pubblicato 09/12/2008 alle 19:28
fonte dall'utente
In altre lingue...                            


6 risposte

voti
0

Si prega di vedere la mia risposta qui:

Come visualizzare una schermata di caricamento, mentre i carichi di contenuto del sito

Io do un piccolo, lavorando ad esempio JavaScript di come fare esattamente questo, spero che aiuta.

Risposto il 09/12/2008 a 19:40
fonte dall'utente

voti
1

Credo che il problema è davvero che si sta utilizzando un solo indicatore. Può essere più facile avere un indicatore per ogni azione che ha bisogno di uno.

Quindi, se avete ricerche multiple su una pagina di ciascuna area di ricerca avrebbe proprio indicatore di essa la indipendente che viene visualizzato o nascosto nelle apposite funzioni javascript.

Risposto il 09/12/2008 a 19:40
fonte dall'utente

voti
8

Se si desidera che lo stesso indicatore di occupato per tutte le azioni, quindi utilizzare un contatore.

Invece di "show_busy_icon ()", fare un "increment_busy_count ()", che chiama "show_busy_icon ()" se conteggio occupato va da 0 a 1. Al posto di "hide_busy_icon ()", fare un "decrement_busy_count ()", che chiama "hide_busy_icon ()" se conteggio occupato va da 1 a 0.

Risposto il 09/12/2008 a 19:47
fonte dall'utente

voti
1

Prototype ha questo built-in; una proprietà chiamata Ajax.activeRequestCounttiene traccia di quante richieste sono attive in un dato momento. Sarà consentono anche di impostare responder globali Ajax per determinare se nascondere o mostrare l'icona "occupato".

Risposto il 09/12/2008 a 21:34
fonte dall'utente

voti
0

Propongo una soluzione diversa. questo non è testato codice, probabilmente non funzionerà, ma è un esempio del concetto.

Presumo la stessa azione esata non viene eseguito in più istanze. Faccio questo per garantire che timeout o problemi simili nella comunicazione non si blocca l'indicatore, ma permette l'indicatore da risolvere quando viene ristabilita la comunicazione

 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();
    }
}
Risposto il 18/04/2012 a 10:03
fonte dall'utente

voti
0

Stiamo tutti guardando nel modo sbagliato. chiamate Ajax sono utilizzati per caricare il contenuto utilizzando il XHR. Ciò significa che ci deve essere qualche elemento predefinito nell'intero DOM cui il contenuto viene caricato. dire che abbiamo un html di questo tipo:

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

Utilizzando jQuery, diciamo che vogliamo caricare rispettivamente in content_1 e content_2 da content_1.php e content_2.php.

Utilizzare il seguente script per gestire l'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");

Questo sarà posto un GIF carico nei rispettivi div ed il GIF sarà poi sostituito dal contenuto caricato dal php. Semplice script di una riga. Nessun contatore richiesto.

Requisito: ogni ultima versione di jQuery.

Risposto il 31/12/2012 a 10:18
fonte dall'utente

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