在同步ajax調用期間將鼠標指針設置為忙

Question

我的站點中有很多ajax調用，根據數據量，它可以讓用戶等待2-4秒。 因此，當從服務器加載數據時，我想將鼠標樣式更改為“忙”。 我已經發現，使用這樣的全局代碼可以很好地完成異步ajax調用：

$(document).ajaxSend(function (){
    $('body').addClass('wait');
}).ajaxComplete(function () {
    $('body').removeClass('wait');
});

效果很好。 問題是，我應該如何處理這些同步功能？ 我需要在某個地方異步：假。 因此，如果沒有其他解決方法。 我寧願手動地在每個同步ajax調用中編寫相同的代碼，而不是重寫每個ajax調用以異步。 原因不是像將false更改為true那樣容易。 我發現的唯一方法是像這樣在ajax調用之前和ajax調用之后手動添加代碼（我的意思是成功）：

 $('html, body').css("cursor", "wait"); $.ajax({ url: //your url type: //your type post or get dataType: "html", data: //data send by ajax success: function(returnData) { $('html, body').css("cursor", "default"); //any other actions .... }, error: function(e) { alert(e); } }); 

它可以工作，但是我有20多個js文件，我什至不知道我有多少個ajax調用。 所以我想問一下是否還有另一種方法可以解決這個問題，所以我不需要在每個ajax調用中編寫相同代碼的50倍以上？

Answer 1

您可以偵聽ajaxSend和ajaxComplete事件，並在您的身體上切換CSS類，從而根據需要啟用/禁用加載指針

 var $body = $('body'); $(document).ajaxSend(function(){ $body.addClass('loading'); }); $(document).ajaxComplete(function(){ $body.removeClass('loading'); }); 

 body.loading{ cursor: progress; // Or any other type you want } 

如果您打算並行跟蹤多個AJAX請求，則可能需要注冊一個計數器。 您可以在每次進行ajax調用時增加計數器，在調用完成后將其遞減，如果計數器達到零，則刪除加載類。

Answer 2

您可以使用$.ajaxStart()和$.ajaxComplete()來設置將應用於整個頁面的全局AJAX屬性：

$(document).ajaxStart(function () {
    $('html, body').css("cursor", "wait");
});
$(document).ajaxComplete(function () {
    $('html, body').css("cursor", "default");
});

或者，您可以使用$.ajaxSetup()方法：

$.ajaxSetup({
    beforeSend: function() {
        $('html, body').css("cursor", "wait");
    },
    complete: function() {
        $('html, body').css("cursor", "default");
    }
});