Javascript 在执行同步ajax请求之前，在单击按钮时显示等待光标

我尝试在用户单击按钮后将光标更改为等待光标。 因此，我将类“wait”添加到具有以下逻辑的主体中：

cursor:wait！重要的

请查看下面的按钮事件处理程序。正如您所看到的，在我将类“wait”添加到body之后，我调用了一个执行同步ajax请求的函数

此请求将删除服务器上大约300个文件，然后重新加载页面

<div id='mybutton'>Button</div>

CSS

body.wait, body.wait *{
    cursor: wait !important;   
}

删除所有内容（）

问题：由于同步ajax请求，光标永远不会更改为等待的光标，如果我将
async
更改为true，则它可以工作，但我需要它是同步的

除了将
async
设置为true之外，还有其他解决方法吗？
这是因为
窗口.location.reload（）
将重新加载页面和使用
$（“body”）.addClass（“wait”）设置的类将丢失。相反，请在成功与错误中删除该类，并确保您使用的是async:true。
这是因为
窗口.location.reload（）
将重新加载您的页面以及使用
$（“body”）.addClass（“wait”）设置的类将丢失。相反，请在成功与错误中删除该类，并确保使用的是async:true。
您可以使用如下标志：

在按钮上单击：

loading = true;
runWaitingCursor();

下面是runWaitingCursor函数：

runWaitingCursor = function(){
    if(loading == true){
        $("body").addClass("wait");
    }else{
        $("body").removeClass("wait");
    }

}

在ajax成功运行时：

loading = false;
runWaitingCursor();

您可以使用这样的标志：

在按钮上单击：

loading = true;
runWaitingCursor();

下面是runWaitingCursor函数：

runWaitingCursor = function(){
    if(loading == true){
        $("body").addClass("wait");
    }else{
        $("body").removeClass("wait");
    }

}

在ajax成功运行时：

loading = false;
runWaitingCursor();

这次对话有点晚了，但是
光标：waitcss不会在视觉上生效，因为浏览器选择在启动同步AJAX调用之前不重新呈现DOM。基本上，应用了该样式，但DOM不会重新渲染，因为大多数现代浏览器渲染引擎都会等到JavaScript线程空闲后才更新DOM

此行为的一个快速修复方法是通过JavaScript更改css类，然后将长时间运行的代码置于setTimeout延迟后，通常为20毫秒左右。
此对话有点晚，但
光标：waitcss不会在视觉上生效，因为浏览器选择在启动同步AJAX调用之前不重新呈现DOM。基本上，应用了该样式，但DOM不会重新渲染，因为大多数现代浏览器渲染引擎都会等到JavaScript线程空闲后才更新DOM

此行为的一个快速修复方法是通过JavaScript更改css类，然后将长时间运行的代码置于设置超时延迟后，通常为20毫秒左右。
请不要使用
async:false
。这是一种可怕的练习。使用控制台时，控制台中会出现警告是有原因的。为什么需要使用同步调用？以防止用户与网站交互。然后使用覆盖
async:false
锁定浏览器，使其看起来像挂起了用户。另外，在发出AJAX请求后直接重新加载页面似乎是完全多余的。要么通过这些AJAX请求获取所需的数据并动态更新DOM，要么使用标准表单提交来重新加载页面，而不是在重新加载时将@rorymcrossan打包。它是冗余的，不完全有用。请不要使用
async:false
。这是一种可怕的练习。使用控制台时，控制台中会出现警告是有原因的。为什么需要使用同步调用？以防止用户与网站交互。然后使用覆盖
async:false
锁定浏览器，使其看起来像挂起了用户。另外，在发出AJAX请求后直接重新加载页面似乎是完全多余的。要么通过这些AJAX请求获取所需的数据并动态更新DOM，要么使用标准表单提交来重新加载页面，而不是在重新加载时将@rorymcrossan打包。我的问题是如何用
async:false
解决这个问题。。。请阅读我的最后一句话：“除了将
async
设置为true之外，还有其他解决方案吗？”这没有意义，因为如果将其设置为async:true，它将不会等待成功或错误响应并直接执行window.location.reload，然后等待“wait”我的问题是如何用
async:false
解决这个问题。。。请阅读我的最后一句话：“除了将
async
设置为true之外，还有其他解决方案吗？”这没有意义，因为如果将其设置为async:true，它将不会等待成功或错误响应并直接执行window.location.reload，然后等待“wait”没有发生。这基本上是我已经在做的事情。我用您的确切代码进行了尝试，但在同步axaj请求期间，鼠标光标没有改变。也许您没有看到这一点，因为您正在本地主机上工作，而且速度太快，无法看到？尝试将加载值保持为true并检查发生的情况。不，Web服务器正在odroid上运行，即使加载始终为true，它也不工作。此对话有点晚，但光标：wait；css不会在视觉上生效，因为浏览器选择在启动同步AJAX调用之前不重新呈现DOM。应用了该样式，但DOM不会重新渲染，因为大多数现代浏览器渲染引擎都会等到JavaScript线程空闲后才更新DOM。这种行为的一个快速修复方法是通过JavaScript更改css类，然后将长时间运行的代码置于setTimeout延迟之后，通常为20毫秒。这基本上就是我已经在做的事情。我用您的精确代码进行了尝试，但在同步axaj请求期间，鼠标光标没有改变。可能您没有看到，因为