Làm thế nào để tránh tình trạng gửi nhiều yêu cầu AJAX trùng lặp (Double Submission/Race Conditions) khi người dùng bấm liên tục vào nút Submit sử dụng jQuery?

Question

Accepted Answer

Bản chất vấn đề
Khi người dùng click liên tục vào nút gửi dữ liệu (Submit Button) trước khi phản hồi từ server trả về, ứng dụng có thể tạo ra nhiều yêu cầu AJAX đồng thời. Điều này dẫn đến việc tạo dữ liệu trùng lặp trong cơ sở dữ liệu hoặc gây quá tải hệ thống.
Giải pháp chuẩn Enterprise
Có hai cách tiếp cận phổ biến để xử lý:

Vô hiệu hóa nút bấm (Disable Button) trong suốt quá trình xử lý AJAX.
Sử dụng cơ chế hủy yêu cầu cũ (Abort AJAX Request) nếu có yêu cầu mới được kích hoạt.

Ví dụ mã nguồn thực hiện vô hiệu hóa:
$('#submit-form').on('submit', function(e) {
    e.preventDefault();

var $submitBtn = $(this).find('button[type="submit"]');

// Kiểm tra nếu đang xử lý thì thoát
    if ($submitBtn.prop('disabled')) {
        return;
    }

// Vô hiệu hóa nút và đổi trạng thái giao diện
    $submitBtn.prop('disabled', true).text('Đang xử lý...');

$.ajax({
        url: '/api/v1/submit',
        method: 'POST',
        data: $(this).serialize(),
        success: function(response) {
            alert('Thành công!');
        },
        error: function(xhr, status, error) {
            alert('Có lỗi xảy ra.');
        },
        complete: function() {
            // Phục hồi lại trạng thái nút bấm dù thành công hay thất bại
            $submitBtn.prop('disabled', false).text('Gửi dữ liệu');
        }
    });
});
Kinh nghiệm thực chiến

Luôn sử dụng callback complete hoặc always trong cấu trúc AJAX để đảm bảo trả lại trạng thái ban đầu cho giao diện, tránh tình trạng nút bấm bị khóa vĩnh viễn khi xảy ra lỗi mạng.

Làm thế nào để tránh tình trạng gửi nhiều yêu cầu AJAX trùng lặp (Double Submission/Race Conditions) khi người dùng bấm liên tục vào nút Submit sử dụng jQuery?

Bản chất vấn đề

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi jquery liên quan cùng chủ đề