Bagaimana saya tahu jika jQuery memiliki permintaan Ajax yang tertunda?

Saya mengalami beberapa masalah dengan kontrol jQuery yang kami buat. Misalkan Anda memiliki daftar tarik-turun yang memungkinkan Anda memasukkan ID item yang Anda cari, dan saat Anda menekan ENTER atau kehilangan fokus di kotak teks, ini memvalidasi melalui jQuery bahwa ID yang Anda masukkan benar, menunjukkan peringatan jika tidak t.

Masalahnya adalah ketika pengguna biasa memasukkan nilai yang tidak valid di dalamnya dan kehilangan fokus dengan menekan tombol kirim, posting jQuery kembali setelah pengiriman formulir telah dikirim.

Apakah ada cara agar saya dapat memeriksa apakah ada permintaan Async yang diproses oleh jQuery sehingga saya tidak mengizinkan pengiriman formulir?

Anda dapat menggunakan ajaxStart dan ajaxStop untuk melacak kapan permintaan aktif.

$.active mengembalikan jumlah permintaan Ajax aktif.

Info selengkapnya di sini

 $(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);
 });

Fungsi $ .ajax () mengembalikan objek XMLHttpRequest. Simpan itu dalam variabel yang dapat diakses dari peristiwa "OnClick" tombol Kirim. Ketika klik kirim diproses, periksa untuk melihat apakah variabel XMLHttpRequest adalah:

1) null, artinya belum ada request yang dikirimkan

2) bahwa nilai readyState adalah 4 (Loaded). Ini berarti permintaan telah dikirim dan dikembalikan dengan sukses.

Dalam salah satu kasus tersebut, kembalikan true dan izinkan pengiriman untuk melanjutkan. Jika tidak, kembalikan false untuk memblokir pengiriman dan memberi pengguna beberapa indikasi mengapa pengiriman mereka tidak berfungsi. :)

Kita harus menggunakan metode $ .ajax.abort () untuk membatalkan permintaan jika permintaan tersebut aktif. Objek promise ini menggunakan properti readyState untuk memeriksa apakah permintaan aktif atau tidak.

HTML

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

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

            }
        });