如何正确运行微调器，直到 AJAX 请求完成？答案

【问题标题】：How to properly run a spinner until the AJAX request finish?如何正确运行微调器，直到 AJAX 请求完成？
【发布时间】：2017-07-17 23:14:00
【问题描述】：

当给定的 AJAX 请求正在进行时，我需要显示一个带有消息的微调器，并且应该保持在那里直到调用完成。我根本不关心调用的返回状态，因为我稍后会处理它（使用相同的代码），所以 404、500、200 或任何其他状态都是有效的。

目前我是这样处理的：

$(document).bind("ajaxSend", function () {
    load_start('Please wait, we are processing data...');
}).bind("ajaxComplete", function () {
    load_end();
});

在上述情况下，出于某种原因（可能是因为 here 解释了 ajaxComplete 与 ajaxStop 之间的区别 - 意思是 ajaxComplete 表示 AJAX 调用已成功启动）调用之前的微调器停止是完成，因为我看到它只是在 Chrome 开发者工具栏上运行。

然后用户尝试再次单击相同的按钮，因为在页面上看不到任何内容，并且他们不会去开发工具栏查看 AJAX 调用是否仍在执行。

我以前也是这样的：

$.ajax({
    ...
}).beforeSend(function () {
    load_start('Please wait, we are processing data...');
}).always(function(){
    load_end();
});

但我遇到了同样的问题。处理这个问题的正确方法是什么？如果有任何插件，我需要它随时推荐。

【问题讨论】：

您希望它用于所有通话吗？或任何特定的电话？
@KoushikChatterjee 应该适用于所有这些，上面的代码意味着适用于一个特定的调用，我最终会得到很多自定义回调

标签： javascript jquery ajax

【解决方案1】：

如果您想为多个 AJAX 请求执行此操作，而无需在每个请求中编写加载代码。您可以执行如下所示的操作。

 //This is called when the first AJAX request is fired.
    $(document).ajaxStart(function(event, jqXHR) {
        //Show spinner
    });

    //This is called after all the AJAX request are stopped.
    $(document).ajaxStop(function(event, jqXHR) {
        //Hide spinner

    });

【讨论】：

这与提供的第一个解决方案有什么区别？绑定事件？
这将处理在您的应用程序中触发的所有 AJAX 调用。而第一个特定于特定呼叫。您必须为每个请求添加回调。
哦，对不起，我的意思是我在 OP 上提供的解决方案，一个绑定与您的事件完全相同的事件，这就是我要寻找的区别 :-)
@RajeshP 你做了我应该做的工作，只是从 OP 确认他想要什么。总之不错，赞一个^^^
ajaxStart 事件在一组调用中的第一个 AJAX 调用被触发时触发。当一组调用中的最后一个 AJAX 调用完成时会触发 ajaxStop。而 ajaxSend 和 ajaxComplete 分别在请求的开始和结束时为每个请求触发。

【解决方案2】：

更新：使用$.ajaxSetuphttps://jsfiddle.net/ewwink/vmm7Lqz8/

$.ajaxSetup({
  url: '/echo/html/',
  beforeSend: load_start,
  complete: load_end
});

你可以这样做，请求完成后会调用handleCallback

$('#button').on('click', function() {
  load_start('Please wait, we are processing data...');
  $.ajax({
    ....
    error: handleCallback,
    success: handleCallback
  });

});

function handleCallback(response, status, jqxhr) {
  ...
  load_end();
}

【讨论】：

这是对的，我可以使用它，但是......它应该适用于所有呼叫，而不仅仅是一个，（参见我上面的评论）。使用它我最终会得到很多自定义回调

【解决方案3】：

使用always()，尽管方法名称不具描述性，但如果您想等待ajax 请求完成，则可以使用。

 }).always(function () {
      load_end();                             
 });

【讨论】：