Javascript 为什么我的jQuery等待游标代码不工作？

我在一个页面中找到了这个jQuery：

<script>
$(document).ready(function () {
    $("#btnGetData").click(function () {
        var _begdate = $("#datepickerFrom").val();
        var _enddate = $("#datepickerTo").val();
        var _unit = $("#unitName").text();
        document.body.style.cursor = 'wait';

        $.ajax({
            type: 'GET',
            url: '@Url.RouteUrl(routeName: "QuadrantData", routeValues: new { httpRoute = true, unit = "un", begdate = "bd", enddate = "ed" })'
                  .replace("un", encodeURIComponent(_unit))
                  .replace("bd", encodeURIComponent(_begdate))
                  .replace("ed", encodeURIComponent(_enddate)),
            contentType: 'text/plain',
            cache: false,
            xhrFields: {
                withCredentials: false
            },
            success: function (returneddata) {
                $("body").html(returneddata);
            },
            error: function () {
                console.log('hey, boo-boo!');
            }
        });

        document.body.style.cursor = 'pointer';
    });
});
</script>

…然后在结束时恢复为默认值：

document.body.style.cursor = 'pointer';

但是，它不起作用-光标永远不会改变。代码确实起作用（ajax调用成功完成），但光标仍然呆滞不定，用户会怀疑是否发生了任何事情

我还需要做什么才能让光标变成等待状态？

试试以下方法：

<script>
$(document).ready(function () {
    $("#btnGetData").click(function () {
        var _begdate = $("#datepickerFrom").val();
        var _enddate = $("#datepickerTo").val();
        var _unit = $("#unitName").text();
        document.body.style.cursor = 'wait';

        $.ajax({
            type: 'GET',
            url: '@Url.RouteUrl(routeName: "QuadrantData", routeValues: new { httpRoute = true, unit = "un", begdate = "bd", enddate = "ed" })'
                  .replace("un", encodeURIComponent(_unit))
                  .replace("bd", encodeURIComponent(_begdate))
                  .replace("ed", encodeURIComponent(_enddate)),
            contentType: 'text/plain',
            cache: false,
            xhrFields: {
                withCredentials: false
            }
    }).done(function(returneddata){
        $("body").html(returneddata);
    }).fail(function(){
        console.log('hey, boo-boo!');
    }).always(function(){
        document.body.style.cursor = 'pointer';
    });
});

$（文档）.ready（函数（）{
$（“#btnGetData”）。单击（函数（）{
var_begdate=$（“#datepickerFrom”）.val（）；
var_enddate=$（“#datepickerTo”）.val（）；
var_unit=$（“#unitName”）.text（）；
document.body.style.cursor='wait'；
$.ajax({
键入：“GET”，
url:“@url.RouteUrl（routeName:“象限数据”，routeValue:new{httpRoute=true，unit=“un”，begdate=“bd”，enddate=“ed”}）”
.更换（“un”，部件（_单位））
.替换（“bd”，编码元件（_begdate））
.替换（“ed”，编码元件（_enddate）），
contentType:'文本/普通'，
cache:false，
xhrFields：{
withCredentials:false
}
}).done（函数（返回数据）{
$（“body”）.html（返回数据）；
}).fail（函数（）{
console.log（'hey，boo boo！'）；
}).always（函数（）{
document.body.style.cursor='pointer'；
});
});

我还将jquery“现代化”为使用较新的标准done（）、fail（）。always（）处理程序（可能很明显）总是在AJAX调用返回后运行

我手工打了这个，所以我希望括号都排好。我相信你会明白要点的

通过查看，您将看到

成功

，

错误

已被弃用

---

编辑：我已经为您创建了一个。单击按钮后，fiddle会模拟一个5秒的AJAX调用。其中一个更改是我更改了html和body

$（'html，body'）.css（'cursor'，'wait'）；

由于AJAX调用的性质（即异步），代码会执行第一行来更改光标

document.body.style.cursor='wait'；

然后执行ajax调用（注意：它不等待响应）

然后执行最后一行：

document.body.style.cursor='pointer'；

这一切发生得太快了，你可能没有注意到

稍后，ajax响应被

success

或

fail

回调处理程序接收和处理

要始终在收到ajax响应（成功或失败）后更改光标，您需要添加另一个名为

始终

的回调，如下所示：

...
,
 always: function () {
       document.body.style.cursor = 'pointer';
  });
...

注意，根据Jquery的版本，这可以称为

done（）

回调

检查此处的文档：

更新

我将格式更新为当前做法，并添加了丢失的呼叫

$（文档）.ready（函数（）{
$（“#btnGetData”）。单击（函数（）{
//var_begdate=$（“#datepickerFrom”）.val（）；
//var_enddate=$（“#datepickerTo”）.val（）；
//var_unit=$（“#unitName”）.text（）；
document.body.style.cursor='wait'；
$.ajax({
键入：“GET”，
网址：'http://stackoverflow.com/',
contentType:'文本/普通'，
缓存：false
})
.done（函数（）{
log（'hey，success！'）；
})
.fail（函数（）{
console.log（'hey，boo boo！'）；
})
.always（函数（）{
log（'hey，done！'）；
document.body.style.cursor='pointer'；
});
});
})；

获取它

如果鼠标也移动，或者只有当鼠标不动时才会发生这种情况吗？我尝试过这种技术，光标在鼠标移动之前不会为我更改，因此在某些情况下，我需要更改为.gif。您需要将

document.body.style.cursor='pointer'；

添加到

success（）

回调函数中（设置

正文

的html内容后）@B.ClayShannon出现，并立即被更改回。如果将指针移到success函数中，它将工作，因为该代码是异步运行的使用

始终（）

回调以更改回此设置（它在成功和失败时执行）我添加了一个可以工作的JSFIDLE。这应该是一个很好的示例。请注意，JSFIDLE有一个“固定”版本的AJAX，但它对我们的目的很好。：-）请参阅下面的答案。我还修改了如何更改光标。HTH！

...
,
 always: function () {
       document.body.style.cursor = 'pointer';
  });
...