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

Question

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

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

效果很好。问题是，我应该如何处理那些同步功能？ 我在某处需要 async: false。因此，如果没有其他方法可以解决它。我宁愿在每个同步 ajax 调用中手动编写相同的代码，也不愿将每个 ajax 调用重写为异步。因为把假的变成真并不容易。我找到的唯一方法是在 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 事件，并在您的 body 上切换一个 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 调用时递增计数器，在调用完成时递减计数器，如果计数器达到零则删除加载类