Come faccio a sapere se jQuery ha una richiesta Ajax in sospeso?

Ho dei problemi con un controllo jQuery che abbiamo creato. Supponiamo di avere un elenco a discesa che ti consente di inserire l'ID dell'articolo che stai cercando, e quando premi INVIO o perdi il focus in una casella di testo convalida tramite jQuery che l'ID che hai inserito è corretto, mostrando un avviso se non lo fa 't.

Il fatto è che quando un utente normale inserisce un valore non valido e perde il focus premendo il pulsante di invio, il messaggio jQuery ritorna dopo che l'invio del modulo è stato inviato.

C'è un modo per controllare se c'è un'elaborazione della richiesta Async da parte di jQuery in modo da non consentire l'invio del modulo?

È possibile utilizzare ajaxStart e ajaxStop per tenere traccia di quando le richieste sono attive.

$.active restituisce il numero di richieste Ajax attive.

Maggiori info qui

 $(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 funzione $ .ajax () restituisce un oggetto XMLHttpRequest. Memorizzalo in una variabile accessibile dall'evento "OnClick" del pulsante Invia. Quando viene elaborato un clic di invio, verificare se la variabile XMLHttpRequest è:

1) null, significa che nessuna richiesta è stata ancora inviata

2) che il valore readyState sia 4 (Loaded). Ciò significa che la richiesta è stata inviata e restituita correttamente.

In uno di questi casi, restituisci true e consenti all'invio di continuare. Altrimenti, restituisci false per bloccare l'invio e dare all'utente alcune indicazioni sul motivo per cui l'invio non ha funzionato. :)

Dobbiamo utilizzare il metodo $ .ajax.abort () per interrompere la richiesta se la richiesta è attiva. Questo oggetto promise utilizza la proprietà readyState per verificare se la richiesta è attiva o meno.

HTML

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

Codice 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 () {

            }
        });