How to check if ajax jquery is in progress or loading in a function

Question

I have a function named "loadloker", that contains ajax jquery function. i want to ask how to check is ajax in this function is running due to already invoked before.

These are the code block:

function loadLoker(id, e){
    if(id==currentLokerId) return;

    var url = "{{ route('daftarloker.show', ':id') }}"
    url = url.replace(':id', id);
    $.ajax({
        type: 'POST',
        url: url,
        success: function(res) {
            if(res.success){
                let loker = res.data.data;

                currentLokerId = loker.lokerid;

                $(e).parents('.card').addClass("border border-info border-3");

                $('#lokerPerusahaanNama').text(loker.perusahaan.nama);            

                $('#lokerdetailContainer').show();

                swal.close()
            }else{
                swal({
                    title: "Gagal!",
                    text: "Gagal mendapatkan data dari server",
                    icon: "warning",
                    button: "Ok!",
                    type: "warning",
                });
            }

            $('#lokerdetailloadingContainer').hide();
        },
        error: function (request, status, error) {

            swal("Gagal!", "Gagal mendapatkan data dari server", "error");
        }
    });
}

I expected to exit from this function if ajax in this function is still running,

Answer 1

You can check $.active property

function checkAjaxStatus() {
  if ($.active > 0) {
    console.log("request is in progress");
  } else {
    console.log("No request");
  }
}