Detener el bloqueo del navegador durante (sincrónico) Ajax?

Question

Lo que intento hacer es agregar una imagen de carga a un div (para que el usuario sepa que algo se está cargando) y luego invoco una función jquery ajax, que está configurada como "async: false". Aquí está mi código:

$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){ 

        } 
}); 

El problema es que las cerraduras del navegador y no añade la imagen de carga hasta después de la llamada AJAX se hace que es inútil, por supuesto. Firefox es el único navegador que realmente agrega la imagen de carga. IE, Chrome y Safari NO anexen la imagen de carga.

Sé que el bloqueo del navegador ocurre porque async está configurado como falso, pero esta es mi única opción porque tengo que esperar a que se complete esta solicitud antes de continuar porque necesito los datos que se devuelven.

¿Hay alguna forma de evitar esto? Si coloco una alerta después de anexar la imagen de carga que funciona, pero no quiero que aparezca una alerta cada vez.

Answer 1

A pesar de su afirmación de lo contrario, no necesita para ser sincrónico. Todo lo que necesite hacer con/después de la respuesta se puede hacer en la devolución de llamada exitosa (y/o errónea o completa). Así que cambia:

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

que ser así:

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

O mueva "otro código" a una función separada que se llama a partir de la devolución de llamada éxito.

Si necesita algo más complicado de lo que se podría encapsular lo anterior en una función de devolución de llamada y pasar de una a ella:

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

Lo que quiere es jQuery.Deferred().

Answer 3

me encontré con este tema y he encontrado una solución para ello.
¡Supongamos! necesita realmente usar async : false en su ajax request y desea mostrar una Imagen de carga mientras se ejecuta la solicitud ajax. Pero la solicitud ajax está deteniendo otra operación de IU (visualización de la imagen de carga) debido a async : false. Por lo tanto, la solución simple para ello, use fadeIn para mostrar la imagen de carga y fadeOut para ocultar la imagen de carga.

Aquí hay una demo de jsFiddle que contiene una solicitud de ajax con async : false. Debido a esto, la imagen de carga no se muestra. (Utilicé el método show para mostrar la imagen de carga).

Aquí hay otro jsFiddle con efecto fadeIn y fadeOut. Muestra la imagen de carga independientemente de async : false en la solicitud ajax.