Question

我尝试在用户点击按钮后将光标更改为等待光标。因此我添加了课程＆＃34;等待＆＃34;到具有以下逻辑的身体：cursor: wait !important;

请查看下面的按钮事件处理程序。正如你所看到的，在我添加课程之后＃34;等待＆＃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？

Answer 1

这是因为window.location.reload()会重新加载您的网页，而您使用$("body").addClass("wait");设置的课程将会丢失。相反，在成功和错误中删除该类，并确保使用async：true。

Answer 2

您可以使用这样的标志：
在按钮上单击：

loading = true;
runWaitingCursor();

这是runWaitingCursor函数：

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

}

并在ajax成功运行：

loading = false;
runWaitingCursor();

Answer 3

这次对话有点晚了，但是cursor: wait; css不能视觉生效，因为浏览器选择在开始同步AJAX调用之前不要重新渲染DOM。基本上，样式是适用的，但是DOM不会重新渲染，因为大多数现代的浏览器渲染引擎会等到JavaScript线程空闲之后再更新DOM。

对此行为的快速解决方案是通过JavaScript更改css类，然后将长时间运行的代码置于setTimeout延迟之后，通常约为20ms。

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

3 个答案: