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

Question

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

这工作...它将类"加载"添加到包含微调器的隐藏div并显示它.

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

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

现在从其他堆栈的答案我已经看到你可以添加命名空间到ajaxstart/stop(jQuery我应该使用多个ajaxStart/ajaxStop处理)

......沿着这条线

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

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

但这并不适用于目前的形式.任何指导将不胜感激...

更新:

作为ILYAS解决方案的补充并基于他的指导我在AJAX CALL中实现了AJAX START功能....

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;
}

Answer 1

因此,正如在与问题相关的讨论中提到的那样,您可以使用自定义命名空间绑定和取消绑定ajax事件.这是演示这种方法的简单示例.在代码的第一部分中,您将使用.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事件处理程序,并将您的逻辑移动到在这些回调中显示/隐藏的微调器,但这实际上取决于它是什么逻辑.