在同步ajax调用期间将鼠标指针设置为忙

Question

我的站点中有很多ajax调用，根据数据的大小，它可以让用户等待2-4秒。因此，当从服务器加载数据时，我想将鼠标样式更改为“忙”。我已经发现，使用全局代码可以很好地完成异步ajax调用，如下所示：

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

它工作得很好。问题是，我应该如何处理这些同步功能？我需要在某个地方异步: false。因此，如果没有其他方法可以绕过它。我宁愿在每个同步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");
    }
});