Question

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

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

效果很好。问题是，我应该怎么做那些同步功能？我需要在某处使用async：false。所以，如果没有其他方法来解决它。我宁愿manuelly写入每个同步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");
    }
});

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

2 个答案: