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

Question

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

请查看下面的按钮事件处理程序。正如您所看到的，在我将“wait”类添加到正文之后，我调用了一个执行同步 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请求，光标永远不会更改为等待光标，如果我将async更改为true，那么它就可以工作，但我需要它同步。

除了将 async 设置为 true 之外，还有其他解决方法吗？

Answer 1

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