JS中设置等待光标未即时生效，仅函数完成后才变化的问题

我明白你遇到的这个困扰——明明已经在代码里设置了光标为等待样式，却要等到整个test函数执行完才会看到光标变化，这其实是浏览器的UI线程和JavaScript执行线程的工作机制导致的。

问题原因 #

浏览器的UI渲染（比如更新光标样式）和JavaScript代码执行是在同一个线程中进行的，同一时间只能处理其中一件事。当你在test函数中先调用$("body").css("cursor","wait")，紧接着就发起AJAX请求时，浏览器会把光标更新的操作放到UI队列中，但当前的JS执行线程还在处理函数后续的AJAX初始化逻辑，根本没机会去处理UI队列里的更新，直到整个test函数执行完毕，才会回过头来刷新UI。

解决方案 #

我们可以把AJAX的调用放到setTimeout中，哪怕只延迟0毫秒，这样就能把AJAX的执行任务放到下一个事件循环里，让浏览器先处理完当前的UI更新（也就是光标样式的改变），再去执行AJAX请求。同时，别忘了在AJAX请求完成（成功或失败）后，把光标改回默认样式，避免影响用户后续操作。

修改后的代码示例：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body style="background-color:yellow;width:100%;height:100%;">
<a href="javascript:test()">test</a>
<script>
function test() {
    $("body").css("cursor","wait"); // 现在这个样式会立即生效
    // 把AJAX放到setTimeout中，让出线程给UI更新
    setTimeout(function() {
        $.ajax({
            url: "your-request-url", // 替换成你的实际请求地址
            success: function(response) {
                // 请求成功后的逻辑
                console.log("请求成功:", response);
                // 恢复默认光标
                $("body").css("cursor","default");
            },
            error: function(xhr, status, error) {
                // 请求失败后的逻辑
                console.error("请求出错:", error);
                // 同样恢复默认光标
                $("body").css("cursor","default");
            }
        });
    }, 0);
}
</script>
</body>
</html>

这样修改后，光标就会在调用$("body").css("cursor","wait")后立即变成等待状态，而不是等到函数执行完毕才变化。

内容的提问来源于stack exchange，提问作者user5182503