Arresta il blocco del browser durante l'Ajax (sincrono)?

Question

Quello che sto cercando di fare è aggiungere un'immagine di caricamento a un div (in modo che l'utente sappia che qualcosa sta caricando) e poi chiamo una funzione jquery ajax, che è impostata su "async: false". Ecco il mio codice:

$jQuery("#playersListDiv").html(loadingImage);  
$jQuery.ajax({ 
     type: "POST", /* this goesn't work with GET */ 
     url: urlValue, /*ex: "NBAgetGamesList.php" */ 
     data: parameters, /*ex: "param1=hello" */ 
     cache: false, 
     async: false, 
        success: function(data){ 

        } 
}); 

Il problema è che i blocchi del browser e non aggiunge l'immagine di carico fino a dopo la chiamata AJAX è fatto che è inutile, ovviamente. Firefox è l'unico browser che aggiunge effettivamente l'immagine di caricamento. IE, Chrome e Safari NON aggiungono l'immagine di caricamento.

So che il blocco del browser si verifica perché async è impostato su false ma questa è la mia unica opzione perché devo attendere che questa richiesta venga completata prima di continuare perché ho bisogno dei dati che vengono restituiti.

C'è qualche modo per aggirare questo? Se inserisco un avviso dopo l'aggiunta dell'immagine di caricamento che funziona, non desidero che venga visualizzato un avviso ogni volta.

Answer 1

Nonostante la tua affermazione contraria, non è necessario che lo sia che sia sincrono. Qualunque cosa tu debba fare con/dopo che la risposta può essere fatta nel callback di successo (e/o errore o completo). Quindi cambiare:

$jQuery("#playersListDiv").html(loadingImage);  
$jQuery.ajax({ 
    ... 
    async: false, 
    ... 
}); 
// OTHER CODE 

per essere come questo:

$jQuery("#playersListDiv").html(loadingImage);  
$jQuery.ajax({ 
    ... 
    async: true, 
    success: function(data) { 
     // OTHER CODE 
    } 
}); 

Oppure spostare "ALTRO CODICE" per una funzione separata che si chiama dalla richiamata successo.

Se avete bisogno di qualcosa di più complicato di così si potrebbe incapsulare quanto sopra in una funzione e passare un callback ad esso:

function doAjaxStuff(callback) { 
    $jQuery("#playersListDiv").html(loadingImage);  
    $jQuery.ajax({ 
     ... 
     async: true, 
     success: function(data) { 
      // optional other processing here, then: 
      callback(data); 
     } 
    }); 
} 

// then from somewhere else in your code: 
doAjaxStuff(function(data) { 
    // do something with data 
}); 

Answer 2

Quello che desideri è jQuery.Deferred().

Answer 3

mi sono imbattuto in questo problema e ho trovato una soluzione per esso.
Supponiamo! hai davvero bisogno di usare async : false nel tuo ajax request e vuoi mostrare un'immagine di caricamento durante l'esecuzione della richiesta ajax. Ma la richiesta ajax interrompe l'operazione di interfaccia utente (visualizzazione dell'immagine di caricamento) a causa di async : false. Quindi, la soluzione semplice per questo, Utilizzare fadeIn per visualizzare l'immagine di caricamento e fadeOut per nascondere l'immagine di caricamento.

Questa è una demo jsFiddle che contiene una richiesta ajax con async : false. A causa di ciò, l'immagine di caricamento non viene visualizzata. (Ho utilizzato il metodo show per visualizzare l'immagine di caricamento.).

Ecco un altro jsFiddle con effetto fadeIn e fadeOut. Visualizza l'immagine di caricamento indipendentemente da async : false nella richiesta ajax.