AJAX Tecniche di ottimizzazione?

Question

La mia domanda è un po 'astratta.

Conosciamo tutti i preloader/spinners AJAX che si presentano quando viene effettuata una richiesta AJAX. La mia domanda è come li eviti?

Prendiamo ad esempio una lista ordinabile. Quando un utente trascina e rilascia elementi per ricorrere a loro, viene effettuata una chiamata AJAX per aggiornare l'ordine.

Prima, facevo apparire uno spinner AJAX a schermo intero per impedire all'utente di fare qualsiasi cosa fino a quando la chiamata AJAX non fosse stata completata.

La mia domanda è: come procedere per evitare lo spinner AJAX e "snellire" le richieste di ajax per garantire se un utente avvia 20 richieste di ajax in 2 secondi, che verranno eseguite in ordine?

Non ho davvero bisogno di esempi di codice, solo tecniche/idee accettate o popolari. O se sto andando completamente fuori strada qui.

Grazie

Answer 1

aggiornamento

uso async javascript library al posto di questo per ottenere quello che vuoi

vecchia sotto

Finora buone risposte in termini di utilizzo di un array o la coda per assicurarsi che siano loade d e restituito uno alla volta. Vorrei eliminare tutti gli spinner in modo simile a come fa Gmail e metto un messaggio all'utente solo quando necessario. Non ha senso disturbare l'utente su tutte queste offerte di spinner. Sembrano comunque dei piccoli fori a robot. Ecco un codice da fare montato.

Da quando ho preso atto di questo, spiegherò le sue caratteristiche.Coda

1. si arresta se si verifica un errore
2. Continua coda come si verifica il successo
3. Ha utenti i gestori di eventi per il successo/errore con il contesto

scrivo plugin così è questa un'idea degna di un plugin? Io non la penso così ma non lo sai mai.

var queue = [], 
doRequest = function(params) { 
    params.running = true; 
    $.ajax({ 
     url: params.url, 
     dataType: 'json', 
     success: function(d) { 
      params.success.call(params,d); 
      queue.unshift(); // Quit counting your change and move along. 
      if (queue.length > 0) { 
       doRequest(queue[0]); // Hey buddy, your next. 
      } 
     }, 
     error: function(a,b,c) { 
      params.error.call(params,a,b,c); 
      alert('"oops"'); // Rick Perry 
     } 
    }); 
}, 
queueRequest = function(params) { 
    queue.push(params); // Sir, you'll need to go to the BACK of the line. 
    if (!queue[0].running) { 
     doRequest(queue[0]); 
    } 
}; 

// so to use this little snippit, you just call "queueRequest" like so (over and over) 
queueRequest({ 
    url: 'someajax.abc', 
    success: function(d) { 
     // let the user know their stuff was saved etc. 
     // "this" will be the context of the "params" 
    }, 
    error: function(a,b,c) { 
     // let the user know something went wrong etc. 
     // "this" will be the context of the "params" 
    } 
}); 

E il gioco è fatto.

Answer 2

Una delle opzioni potrebbe essere la creazione di una sorta di coda di richieste sul client. Una volta che l'utente ordina due elementi, un elemento viene aggiunto alla coda e inizia l'esecuzione. Se un altro tipo si verifica prima del completamento della prima chiamata, viene messo in coda e verrà eseguito dopo il primo termine.

UPDATE:
Si dovrebbe sicuramente gestire un caso, quando viene eseguita una richiesta sincrona. In questa fase tutte le richieste di ajax dovrebbero essere in qualche modo archiviate in campo nascosto (solo un'idea) e processate dal server prima della richiesta sincrona stessa.

Answer 3

È possibile creare un "gestore richieste ajax" che accoda le code (e potenzialmente raggruppa insieme) in attesa di richieste Ajax. Ho un'applicazione complessa con molti controlli aggiornabili ajax, mostro gli spinners solo sui controlli che vengono aggiornati. Dal momento che il tuo elenco trascinabile aggiorna solo cose sul server, puoi probabilmente andare via senza uno spinner.

Answer 4

io vi proponiamo coda di jQuery, è aiutare a coda nulla, se richiesta o l'animazione Ajax coda ...

Answer 5

Questa risposta è un po 'astratto, ma uno sguardo verso l'oggetto jQuery differite: http://api.jquery.com/category/deferred-object/

Potrebbe essere utili per l'utente, dal momento che aggiunge fondamentalmente alcune informazioni di stato alla chiamata AJAX che si può leggere/aggiornamento a volontà.

Answer 6

• avete una richiesta Q. centrale
• E un filatore nascosta in cima a tutto.

richiesta centrale Q Avere un allineamento centrale, che contiene tutte temporanea richiesta, quindi pesudo codice sarebbe qualcosa di simile ...

var centralQ = []; //holds the entire process Q 

var inProc = false; //provides an in Q proc lock 
//processes the request one at a time 

function reqProc() { 
    if(centralQ.length == 0) { 
     inProc = false; 
     return true; 
    } 

    inProc = false; //locks it 
    var req = centralQ[0]; 

    function callBack() { 
     //error/res processing?? 
     if(req.callback) { 
      req.callback.apply(req, arguments); //calls the request callback 
     } 

     window.setTimeout(reqProc, 0); //loop backs, uses timeOut to defer the the loop 
    } 

    //Your loader??? 
    jQuery.get(req.url, req.data, callBack); 
} 

function addReq(addRequest) { 
    centralQ.push(addRequest); 
    if(!inProc) { //does not process if it is already running 
     reqProc(); 
    } 
} 

È proabably bisogno di fare qualche errore di cattura/riprovando, ma ottieni l'idea approssimativa.

Globale Spinner Basta iniziare fadding il filatore in alto in caso di necessità, e dissolvenza fuori quando non serve.

Answer 7

Non è esattamente questo il motivo, c'è un'opzione async in jQuery?

Utilizzare async: true per accodare la richiesta.

I filatori vengono mantenuti per evitare di inviare la stessa richiesta oltre a. Come prendere un caso, in cui vi è un'opzione per abilitare e disabilitare una funzione ... se un utente fa di nuovo clic sullo stesso pulsante, si invia stessa richiesta ripetutamente. Utilizzare solo filatori in questi casi.

Aprire una grande scatola, per evitare l'accesso a tutta la pagina ... è solo un'idea stupida (senza offesa).

Utilizzare i filatori, per gli elementi specifici .. che vengono elaborati o manipolati in qualche modo. Per la richiesta, basta usare asincrona ...

CASO CHIUSO;)