¿Cómo sé si jQuery tiene una solicitud Ajax pendiente?

Tengo algunos problemas con un control jQuery que hicimos. Suponga que tiene una lista desplegable que le permite ingresar el ID del artículo que está buscando, y cuando presiona ENTER o pierde el foco en un cuadro de texto, valida a través de jQuery que el ID que ingresó es correcto, mostrando una alerta si no lo hace 't.

El caso es que cuando un usuario común ingresa un valor no válido en él y pierde el foco al presionar el botón Enviar, la publicación de jQuery regresa después de que se envió el envío del formulario.

¿Hay alguna forma de que pueda verificar si jQuery procesa alguna solicitud Async para no permitir el envío del formulario?

Puede usar ajaxStart y ajaxStop para realizar un seguimiento de cuándo las solicitudes están activas.

$.active devuelve el número de solicitudes Ajax activas.

Más info aquí

 $(function () {
        function checkPendingRequest() {
            if ($.active > 0) {
                window.setTimeout(checkPendingRequest, 1000);
                //Mostrar peticiones pendientes ejemplo: $("#control").val("Peticiones pendientes" + $.active);
            }
            else {

                alert("No hay peticiones pendientes");

            }
        };

        window.setTimeout(checkPendingRequest, 1000);
 });

La función $ .ajax () devuelve un objeto XMLHttpRequest. Almacene eso en una variable a la que se pueda acceder desde el evento "OnClick" del botón Enviar. Cuando se procesa un clic de envío, verifique si la variable XMLHttpRequest es:

1) nulo, lo que significa que aún no se ha enviado ninguna solicitud

2) que el valor readyState es 4 (cargado). Esto significa que la solicitud se envió y se devolvió correctamente.

En cualquiera de esos casos, devuelva verdadero y permita que el envío continúe. De lo contrario, devuelva falso para bloquear el envío y darle al usuario alguna indicación de por qué su envío no funcionó. :)

Tenemos que utilizar el método $ .ajax.abort () para cancelar la solicitud si la solicitud está activa. Este objeto de promesa usa la propiedad readyState para verificar si la solicitud está activa o no.

HTML

<h3>Cancel Ajax Request on Demand</h3>
<div id="test"></div>
<input type="button" id="btnCancel" value="Click to Cancel the Ajax Request" />

Código JS

//Initial Message
var ajaxRequestVariable;
$("#test").html("Please wait while request is being processed..");

//Event handler for Cancel Button
$("#btnCancel").on("click", function(){
if (ajaxRequestVariable !== undefined)

if (ajaxRequestVariable.readyState > 0 && ajaxRequestVariable.readyState < 4)
{
  ajaxRequestVariable.abort();
  $("#test").html("Ajax Request Cancelled.");
}
});

//Ajax Process Starts
ajaxRequestVariable = $.ajax({
            method: "POST",
            url: '/echo/json/',
            contentType: "application/json",
            cache: false,
            dataType: "json",
            data: {
        json: JSON.encode({
         data:
             [
                            {"prop1":"prop1Value"},
                    {"prop1":"prop2Value"}
                  ]         
        }),
        delay: 11
    },

            success: function (response) {
            $("#test").show();
            $("#test").html("Request is completed");           
            },
            error: function (error) {

            },
            complete: function () {

            }
        });