在同步 ajax 调用期间将鼠标指针设置为忙答案

【问题标题】：Set mouse pointer to busy during sync ajax call在同步 ajax 调用期间将鼠标指针设置为忙
【发布时间】：2018-01-22 11:49:34
【问题描述】：

我的站点中有很多 ajax 调用，根据数据的大小，它可以让用户等待 2-4 秒。因此，当从服务器加载数据时，我想将鼠标样式更改为“忙碌”。我已经发现，通过使用这样的全局代码可以很好地完成异步 ajax 调用：

$(document).ajaxSend(function (){
    $('body').addClass('wait');
}).ajaxComplete(function () {
    $('body').removeClass('wait');
});

效果很好。问题是，我应该如何处理这些同步功能？我需要在某个地方异步：假。因此，如果没有其他方法可以绕过它。我宁愿在每个同步 ajax 调用中手动编写相同的代码，也不愿将每个 ajax 调用重写为异步。因为它并不像将 false 更改为 true 那样容易。我发现的唯一方法是在 ajax 调用之前以及在 ajax 调用之后（我的意思是成功）手动添加代码，如下所示：

$('html, body').css("cursor", "wait");
$.ajax({
  url: //your url
  type: //your type post or get 
  dataType: "html",
  data: //data send by ajax
  success: function(returnData) {
    $('html, body').css("cursor", "default");
    //any other actions ....
  },
  error: function(e) {
    alert(e);
  }
});

它会工作，但我有 20 多个 js 文件，我什至不知道我有多少个 ajax 调用。所以我想问一下是否有另一种方法来解决它，所以我不需要在每个 ajax 调用中编写 50 多次相同的代码？

【问题讨论】：

您的第一个示例，使用全局ajaxSend() 和ajaxComplete() 处理程序，是您需要的解决方案。为什么它不适合你？
只需从您的 success 回调中删除 $('html, body').css("cursor", "default"); 并（当然）让 wait 类在您的 CSS 中正常运行。
@ashik 不，你不知道，这就是 ajaxSend 和 ajaxComplete 的用途。除非您的意思是 async: false 案例。
@MinXIE 这正是你永远不应该使用async: false的原因。由于浏览器 UI 被冻结，您无法在同步请求期间显示内容。仅使用异步请求，而使用回调模式。
The point is, I need at somewhere the async: false 不，你没有。除了设计糟糕的系统或糟糕的代码之外，同步请求不再有任何正当理由。如果您正在努力将逻辑更改为异步，我建议您提出一个新问题。

标签： javascript jquery ajax asynchronous

【解决方案1】：

您可以监听 ajaxSend 和 ajaxComplete 事件并在您的主体上切换一个 CSS 类，根据需要启用/禁用加载指针

var $body = $('body');
$(document).ajaxSend(function(){
    $body.addClass('loading');
});

$(document).ajaxComplete(function(){
    $body.removeClass('loading');
});

body.loading{
    cursor: progress; // Or any other type you want
}

如果您计划并行跟踪多个 AJAX 请求，您可能需要注册一个计数器。您可以在每次发生 ajax 调用时递增计数器，在调用完成时递减计数器，如果计数器达到零，则删除加载类

【讨论】：

我认为您没有阅读问题。您的解决方案完全等于提出的问题，但对问题没有用处。
@PedroRamon 我可能误解了，但 OP 没有按照我在回答中的建议进行操作。 OP 在这些事件上添加了一个类，但没有指定 CSS 以使其实际更改光标。 OP 也有一些代码需要在每次进行 AJAX 调用时添加。在这种情况下并非如此。你能澄清一下你的意思吗？
@ChiragRavindra 抱歉，我对我的问题的错误描述表示歉意，因为我不是母语人士。通过异步 ajax 调用，您的解决方案效果很好。我已经测试过了。现在的问题是我需要一个解决这些同步 ajax 调用的方法。不过还是谢谢你的回答。
@MinXIE 我明白了。我在文档中没有看到设置async:false 会影响回调的行为。来自文档：These methods register handlers to be called when certain events, such as initialization or completion, take place for any Ajax request on the page. The global events are fired on each Ajax request if the global property in jQuery.ajaxSetup() is true, which it is by default. Note: Global events are never fired for cross-domain script or JSONP requests, regardless of the value of global. 将进一步试验并恢复

【解决方案2】：

您可以使用 $.ajaxStart() 和 $.ajaxComplete() 设置将应用于整个页面的全局 AJAX 属性：

$(document).ajaxStart(function () {
    $('html, body').css("cursor", "wait");
});
$(document).ajaxComplete(function () {
    $('html, body').css("cursor", "default");
});

或者你可以使用 $.ajaxSetup() 方法：

$.ajaxSetup({
    beforeSend: function() {
        $('html, body').css("cursor", "wait");
    },
    complete: function() {
        $('html, body').css("cursor", "default");
    }
});

【讨论】：