针对包含 AjaxStart/Stop 的特定 ajax 调用答案

【问题标题】：Targeting specific ajax calls which incorporate AjaxStart/Stop针对包含 AjaxStart/Stop 的特定 ajax 调用
【发布时间】：2014-10-21 04:07:30
【问题描述】：

我试图在我的页面上显示 ajax 调用期间的加载微调器。我想针对不同的 ajax 调用并显示不同的微调器。就目前而言，由于 ajaxStart 是一个全局事件，所有 ajax 调用最终会同时显示所有微调器。

这可行...它将“加载”类添加到包含微调器的隐藏 div 并显示它。

$(document).bind("ajaxStart", function () {
    $body.addClass("loading");
});

$(document).bind("ajaxStop", function () {
    $body.removeClass("loading");
});

现在从其他堆栈答案中，我看到您可以将命名空间添加到 ajaxstart/stop (jQuery should I use multiple ajaxStart/ajaxStop handling)

......沿线

$(document).bind("ajaxStart.secondCall", function () {
    $body.addClass("loading2");
});

$(document).bind("ajaxStop.secondCall", function () {
    $body.removeClass("loading2");
});

但这不适用于当前形式。任何指导将不胜感激...

更新：

作为对 ILYAS 解决方案的补充，并根据他的指导，我在我的 AJAX 调用中实现了 AJAX 启动功能 ....

function sendResponse(thread_id){
        $(document).off(".reference_call");
         $(document).on("ajaxStart.secondCall", function () {
         $('.spinner').show();
      });
 $.ajax({
    url: 'someURL.php',
    type: 'post',
    data: {
              //data
         },
            success: function(data) {
            $(document).on("ajaxStop.secondCall", function () {
               $('.spinner').hide();
            });
                    //do stuff....

                    } else {

                     //do stuff....
                    }
              }
        });
  return false;
}

【问题讨论】：

你确定你的回调没有触发吗？这是简单的jsfiddle 按预期工作。
伊利亚，感谢您的评论。问题是我希望第一组函数将加载类附加到主体，而第二个函数在单独的时间为单独的 ajax 调用发生。目前，该页面上的任何 ajax 调用都会调用两者 - 我确实理解为什么会发生这种情况，但我不知道如何分别针对同一页面上的不同 ajax 调用
哦，我明白你的意思了。所以，我有 2 个问题：你能移动关于在 ajaxStart 和 ajaxStop 回调中显示什么微调器的逻辑吗？如果没有 - 您是否尝试过在发送请求之前绑定到 ajax 事件，然后在请求完成后解除绑定？
Ilya，关于绑定 - 这是我考虑过的，但我无法让它工作 - 这是因为我对 jquery 还很陌生，我确定不是因为它不起作用。虽然这听起来像是用勺子喂食 - 如果你能用一个例子来指出我正确的方向，如果你不胜感激的话，你将如何实现它......
这里，我已经更新了我的jsfiddle，如果这和你想要的一样，我会给出答案。

标签： jquery ajax

【解决方案1】：

因此，正如在与问题相关的讨论中所提到的，您可以使用自定义命名空间绑定到 ajax 事件并取消绑定。这是简单的example 演示这种方法。在代码的第一部分，您使用 .firstCall 命名空间绑定到 ajax 事件，如下所示：

$(document).on("ajaxStart.firstCall", function () {
    $('.spinner1').show();
});
$(document).on("ajaxStop.firstCall", function () {
    $('.spinner1').hide();
});
// then goes your ajax call

稍后在代码中，当您需要发送第二个具有不同微调器的 ajax 时，您必须从 .firstCall 命名空间解除绑定并绑定到 .secondCall，如下所示：

$(document).off(".firstCall");
$(document).on("ajaxStart.secondCall", function () {
    $('.spinner2').show();
});
$(document).on("ajaxStop.secondCall", function () {
    $('.spinner2').hide();
});
// then goes your second ajax call

作为替代方案，您可以考虑使用一组全局 ajax 事件处理程序，并将您的逻辑移动到在这些回调中显示/隐藏的微调器上，但这实际上取决于它是什么逻辑。

【讨论】：

伊利亚，太完美了。虽然我认为你在 jfiddle 中的解决方案稍微好一点——至少对于 jQuery 的新手来说，因为你已经有用地展示了这些附加到按钮的功能。干得好
你拯救了我的一天

【解决方案2】：

我发现这个实现更可靠（尤其是当您使用 Promise 和多个异步调用时）：

$(document).ajaxStart(function(r) {
  if ($('#d-loading').is(':hidden')) {
    $('#d-loading').modal('show');
    }

}).ajaxStop(function(r) {
  if ($('#d-loading').is(':visible')) {
    $('#d-loading').modal('hide');
  }

}).ajaxError(function(event, request, settings) {
  //Deal with error here
});

我正在使用启动或停用的引导模式。希望对您有所帮助！

【讨论】：

【解决方案3】：

我遇到了同样的问题，并通过 $.active 和 beforeSend : function(){}, 解决了

问题：我在设置间隔中有一些代码用于刷新通知，我们在全局范围内应用了 loding 覆盖，因此所有 AJAX 加载该覆盖并且每个设置的间隔都显示间隔。SO 如何删除特定 ajax 的覆盖?

setInterval(function () { RefreshNotification(); }, 10000);

                    $(document).ajaxStart(function () {        
                        $('#dvLoading').show();
                    });
                    $(document).ajaxStop(function () {
                        $('#dvLoading').hide();
                    });

解决方案：如何去除覆盖层 **解决方案 1：**
在 beforesend 上简单隐藏覆盖

$.ajax({
        type: 'GET',
        datatype: 'HTML',
        url: NotificationURL,
        beforeSend: function () {

                $('#dvLoading').hide();

        },
        success: function (result) { }

});

问题：如果并行请求，那么上面的代码不起作用

解决方案 2： 在 beforesend 上简单隐藏覆盖并检查总 ajax 请求的条件

$.ajax({
        type: 'GET',
        datatype: 'HTML',
        url: NotificationURL,
        beforeSend: function () {
            //console.log($.active);
            if ($.active < 2) {
                $('#dvLoading').hide();
            }
        },
        success: function (result) {
            $("#header_notification_bar").html("");
            $("#header_notification_bar").html(result);
        },
        error: function
            (XMLHttpRequest, textStatus, errorThrown) {
           alert(errorThrown);
        }
    });

享受上面的代码应该可以完美运行

【讨论】：