我尝试在用户点击按钮后将光标更改为等待光标。
因此我添加了课程"等待"到具有以下逻辑的身体:cursor: wait !important;
请查看下面的按钮事件处理程序。正如你所看到的,在我添加课程之后#34;等待"对于body,我调用一个执行同步ajax请求的函数。
此请求将删除服务器上的大约300个文件,然后重新加载页面。
<div id='mybutton'>Button</div>
按钮事件处理程序
$("div#mybutton").click(function(){
$("body").addClass("wait");
delete_all();
});
CSS
body.wait, body.wait *{
cursor: wait !important;
}
DELETE_ALL()
function delete_all() {
...
list.each(function(){
...
$.ajax({
url: "ajax.php",
type: "POST",
async: false,
data: { cmd: "delete_files", ... },
success: function(response) {
console.log(response);
},
error: function(response) {
console.warn(response);
}});
...
});
//Reload the page
window.location.reload();
...
}
问题:由于同步ajax请求,Cursor永远不会更改为等待光标,如果我将async
更改为true然后它可以工作,但我需要它是同步的。 / p>
我是否有解决方法或其他解决方案,然后将async
设置为true?
答案 0 :(得分:2)
这是因为window.location.reload()
会重新加载您的网页,而您使用$("body").addClass("wait");
设置的课程将会丢失。相反,在成功和错误中删除该类,并确保使用async:true。
答案 1 :(得分:0)
您可以使用这样的标志:
在按钮上单击:
loading = true;
runWaitingCursor();
这是runWaitingCursor函数:
runWaitingCursor = function(){
if(loading == true){
$("body").addClass("wait");
}else{
$("body").removeClass("wait");
}
}
并在ajax成功运行:
loading = false;
runWaitingCursor();
答案 2 :(得分:0)
这次对话有点晚了,但是cursor: wait;
css不能视觉生效,因为浏览器选择在开始同步AJAX调用之前不要重新渲染DOM。基本上,样式是适用的,但是DOM不会重新渲染,因为大多数现代的浏览器渲染引擎会等到JavaScript线程空闲之后再更新DOM。
对此行为的快速解决方案是通过JavaScript更改css类,然后将长时间运行的代码置于setTimeout延迟之后,通常约为20ms。