Làm cách nào để biết jQuery có yêu cầu Ajax đang chờ xử lý hay không?

Tôi đang gặp một số vấn đề với điều khiển jQuery mà chúng tôi đã thực hiện. Giả sử bạn có một danh sách thả xuống cho phép bạn nhập ID của mục bạn đang tìm kiếm và khi bạn nhấn ENTER hoặc mất tiêu điểm trong hộp văn bản, nó sẽ xác thực thông qua jQuery rằng ID bạn đã nhập là chính xác, hiển thị cảnh báo nếu không. 't.

Vấn đề là khi một người dùng bình thường nhập một giá trị không hợp lệ vào đó và mất tiêu điểm bằng cách nhấn nút gửi, bài đăng jQuery sẽ trở lại sau khi gửi biểu mẫu đã được gửi đi.

Có cách nào để tôi có thể kiểm tra xem có bất kỳ yêu cầu Async nào được jQuery xử lý để tôi không cho phép gửi biểu mẫu không?

Bạn có thể sử dụng ajaxStart và ajaxStop để theo dõi thời điểm các yêu cầu hoạt động.

$.active trả về số lượng yêu cầu Ajax đang hoạt động.

Thông tin thêm tại đây

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

Hàm $ .ajax () trả về một đối tượng XMLHttpRequest. Lưu trữ trong một biến có thể truy cập được từ sự kiện "OnClick" của nút Gửi. Khi một nhấp chuột gửi được xử lý, hãy kiểm tra xem biến XMLHttpRequest có phải là:

1) null, nghĩa là chưa có yêu cầu nào được gửi đi

2) giá trị readyState là 4 (Đã tải). Điều này có nghĩa là yêu cầu đã được gửi và trả về thành công.

Trong một trong hai trường hợp đó, hãy trả về true và cho phép quá trình gửi tiếp tục. Nếu không, hãy trả về false để chặn gửi và cung cấp cho người dùng một số dấu hiệu về lý do tại sao gửi của họ không hoạt động. :)

Chúng tôi phải sử dụng phương thức $ .ajax.abort () để hủy bỏ yêu cầu nếu yêu cầu đang hoạt động. Đối tượng hứa hẹn này sử dụng thuộc tính readyState để kiểm tra xem yêu cầu có hoạt động hay không.

HTML

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

Mã 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 () {

            }
        });