我的站点中有很多 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 多次相同的代码?
最佳答案
您可以监听 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 调用时递增计数器,在调用完成时递减计数器,如果计数器达到零则删除加载类
关于javascript - 在同步 ajax 调用期间将鼠标指针设置为忙碌,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48380928/