Có thể nào, Chrome hủy bỏ các yêu cầu Ajax đang chờ xử lý, khi trình duyệt đang được chuyển hướng đến một URL khác?

Question

tôi có chức năng này để mở khóa một danh sách người dùng hiện đang chỉnh sửa:

function unsetLock(id) { 
    $.ajax({ 
    type: "POST", 
    url: "/ajax.php?action=unsetLock", 
    dataType: 'json', 
    data: "id="+ id 
    }); 
    return true; 
} 

Khi dùng điều hướng khỏi danh sách, tôi phải hủy bỏ khóa:

unsetLock(lockID); 
document.location.href='/page/to/navigate/back/to.php'; 

Tuy nhiên unlock này đôi khi hoạt động và đôi khi không. Tôi nghĩ rằng đó là vì document.location.href được thực thi, trước khi cuộc gọi ajax thực sự được gửi đến máy chủ.

Tôi làm cách nào để buộc mở khóa trước khi điều hướng người dùng đến trang tiếp theo?

Thực ra tôi không cần phải chờ phản hồi Ajax, vì tôi muốn chuyển hướng người dùng, cho dù thành công hay không. Tôi chỉ muốn chắc chắn rằng nó đang được chuyển đến máy chủ.

Nếu tôi đặt document.location.href bên trong hàm Ajax, nó sẽ chờ trả lời.

Answer 1

Cách thực sự không tốt để thực hiện việc này là thêm: async: false, trình duyệt này sẽ khóa trình duyệt cho đến khi cuộc gọi AJAX hoàn tất. Tất nhiên, nếu có sự cố và cuộc gọi AJAX không bao giờ hoàn thành ...

Đây là giải pháp nhanh nhất và dễ nhất cho vấn đề của bạn, nhưng có lẽ không phải là tốt nhất.

Tôi, cá nhân, sẽ có khóa chỉ kéo dài trong hai mươi giây (sử dụng dấu thời gian trong cơ sở dữ liệu) và gửi một cuộc gọi ajax cứ sau mười giây để khóa lại trang (nếu có ý nghĩa) bằng cách sử dụng setInterval(). Bằng cách đó, khóa sẽ tự tắt chính nó sau vài giây sau khi ai đó rời khỏi trang và tốt cho dù tình huống có xảy ra (mất điện cho khách hàng sẽ không để trang bị khóa mãi mãi, chẳng hạn).

Answer 2

Có lẽ tôi đang thiếu thứ gì đó, nhưng tại sao không sử dụng tùy chọn success trong cuộc gọi Ajax? Điều này sẽ thực thi bất kỳ kết quả nào và đảm bảo nó đạt đến máy chủ.

function unsetLock(id) { 
    $.ajax({ 
    type: "POST", 
    url: "/ajax.php?action=unsetLock", 
    dataType: 'json', 
    data: "id="+ id, 
    success: function(){ 
     document.location.href='/page/to/navigate/back/to.php'; 
    } 
    }); 
    return true; 
}