javascript - remove - jquery ajax beforesend

jquery remove data attribute

Question

Tengo una llamada ajax simple que está ejecutando una función en el antes de enviar y en completar. Se ejecutan bien, pero el envío anterior "aparentemente" no se ejecuta hasta después del éxito. En el envío anterior hay una notificación "Por favor, espere". Si puse un descanso después de la función en el envío anterior, se mostrará esa notificación y luego se ejecutará correctamente. Sin el punto de interrupción, se sentará allí y pensará mientras espera la respuesta y luego aparecerá una notificación de espera por favor durante una fracción de segundo después de que se haya alcanzado el éxito. La funcionalidad deseada es hacer que la notificación aparezca tan pronto como se envíe la solicitud para que se muestre mientras está esperando la respuesta.

 $.ajax({
type : ''POST'',
url : url,
async : false,
data : postData,
beforeSend : function (){
$.blockUI({
fadeIn : 0,
fadeOut : 0,
showOverlay : false
});
},
success : function (returnData) {
//stuff
},
error : function (xhr, textStatus, errorThrown) {
//other stuff
},
complete : function (){
$.unblockUI();
}
});

Answer 1

Esto es muy probablemente debido a async : false . Como su llamada es sincrónica, después de que comience su llamada a la función $.ajax() , no sucederá nada hasta que se reciba la respuesta, y el siguiente paso será el controlador de success

Para que funcione, puedes hacer algo como esto.

$.blockUI({
fadeIn : 0,
fadeOut : 0,
showOverlay : false
});
// and here goes your synchronous ajax call
$.ajax({
type : ''POST'',
url : url,
async : false,
data : postData,
success : function (returnData) {
//stuff
},
error : function (xhr, textStatus, errorThrown) {
//other stuff
},
complete : function (){
$.unblockUI();
}
});

Answer 2

Otro enfoque podría ser sobrecargar la función $ .ajax

$.orig_ajax = $.ajax;
$.ajax = function() {
var settings = {async: true};
if (2 == arguments.length && ''string'' == typeof arguments[0] && ''object'' == typeof arguments[1])
settings = arguments[1];
else if (arguments.length && ''object'' == typeof arguments[0])
settings = arguments[0];
if (!settings.async && ''function'' == typeof settings.beforeSend) {
var args = arguments;
settings.beforeSend();
var dfd = $.Deferred();
setTimeout(function() {
$.orig_ajax.apply($, args).then(dfd.resolve)
.fail(dfd.reject);
} ,100);
return dfd.promise();
} else
return $.orig_ajax.apply($, arguments);
};

no es perfecto (debido a diferentes objetos diferidos), pero puede ser útil ...

Answer 3

Su problema es el async:false flag. Además del hecho de que es una mala práctica (y en realidad solo tiene sentido en un número muy limitado de casos), en realidad confunde con el orden de ejecución del resto del código. Aquí es por qué:

Parece que en algún lugar del código blockUI están configurando un setTimeout . Como resultado, el código blockUI espera un período de tiempo muy corto. Como la siguiente instrucción en la cola es la llamada ajax() , la ejecución de blockUI se coloca justo detrás de eso. Y ya que está usando async:false , tiene que esperar hasta que se complete la llamada completa ajax antes de que pueda ejecutarse.

En detalle, esto es lo que sucede:

• blockUI
• blockUI tiene un setTimeout y se ejecuta después de que se termina el tiempo de espera (incluso si la duración del tiempo de espera es 0, la siguiente línea, ajax() se ejecutará primero)
• ajax() se llama con async:false , lo que significa que JS detiene todo hasta que se devuelve la solicitud.
• ajax() devuelve correctamente y la ejecución de JS puede continuar
• el setTimeout dentro del código blockUI probablemente haya terminado, por lo que se ejecutará a continuación
• Parece que blockUI ejecuta como parte del success , pero en realidad, se acaba de poner en cola debido a un tiempo de espera.

Si NO usaría async:false , la ejecución sería la siguiente:

• blockUI
• blockUI tiene un setTimeout y se ejecuta después de que se termina el tiempo de espera (incluso si la duración del tiempo de espera es 0, la siguiente línea, ajax() se ejecutará primero)
• Se llama ajax() y se envía una solicitud al servidor.
• mientras se está conectando al servidor, la ejecución normal de JS continúa
• el setTimeout dentro del código blockUI probablemente haya terminado, por lo que se ejecutará a continuación
• el texto blockUI aparece
• a menos que haya más código JS en algún lugar, la ejecución de JS se realiza hasta que AJAX se complete correctamente y se ejecuten las devoluciones de llamada complete

Aquí hay algunos ejemplos de jsFiddle para demostrar el problema:

Ejemplo 1 : Esta es la situación que estás experimentando. El texto blockUI no se muestra hasta después de que se ejecuta la llamada ajax .

Ejemplo 2 : Esta es exactamente la misma situación que la suya, pero con una alert antes de la llamada ajax . Debido a que hay una alert , el tiempo de espera dentro de blockUI coloca la apariencia del texto blockUI después de la alert lugar de después del ajax .

Ejemplo 3 : Así es como se supone que funciona sin async:false

Answer 4

$.blockUI({
fadeIn : 0,
fadeOut : 0,
showOverlay : false
});
setTimeout(function() {
$.ajax({
type : ''POST'',
url : url,
async : false,
data : postData,
success : function (returnData) {
//stuff
},
error : function (xhr, textStatus, errorThrown) {
//other stuff
}
});
},100);
$.unblockUI();

http://bugs.jquery.com/ticket/7464