如何在特定的ajax调用上调用.ajaxStart()

Question

我对站点文档进行了一些ajax调用,根据ajax状态显示或隐藏进度条

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

我想基本上在网站的其他部分覆盖这些方法,在这些部分上进行了很多快速的小型ajax调用,并且不需要进出弹出的进度条.我试图将它们附加到其他$ .getJSON和$ .ajax调用中或插入它们.我试过把它们链接起来,但显然这并不好.

$.getJSON().ajaxStart(function(){ 'kill preloader'});

Answer 1

2018注意:这个答案已经过时; 随意提出一个可以解决的答案.

您可以使用自定义命名空间绑定ajaxStart和ajaxStop:

$(document).bind("ajaxStart.mine", function() {
    $('#ajaxProgress').show();
});

$(document).bind("ajaxStop.mine", function() {
    $('#ajaxProgress').hide();
});

然后,在网站的其他部分,您将在 .json调用之前暂时取消绑定它们:

$(document).unbind(".mine");

在寻找答案时从这里得到了想法.

编辑:我没时间测试它,唉.

Answer 2

选项对象中有一个属性.ajax()称为全局.

如果设置为false,则不会触发调用的ajaxStart事件.

    $.ajax({
        url: "google.com",
        type: "GET",
        dataType: "json",
        cache: false,
        global: false, 
        success: function (data) {

Answer 3

如果你把它放在处理ajax动作的函数中,它只会在适当的时候自行绑定:

$('#yourDiv')
    .ajaxStart(function(){
        $("ResultsDiv").hide();
        $(this).show();
    })
    .ajaxStop(function(){
        $(this).hide();
        $(this).unbind("ajaxStart");
    });

Answer 4

使用本地范围的Ajax事件

                success: function (jQxhr, errorCode, errorThrown) {
                    alert("Error : " + errorThrown);
                },
                beforeSend: function () {
                    $("#loading-image").show();
                },
                complete: function () {
                    $("#loading-image").hide();
                }

Answer 5

此外,如果要禁用对.ajaxStart()和的调用.ajaxStop(),可以在请求中设置global选项;)false.ajax()

在这里查看更多:如何在特定的ajax调用上调用.ajaxStart()

Answer 6

不幸的是，ajaxStart 事件没有任何可用于决定是否显示动画的附加信息。

无论如何，这是一个想法。在你的 ajaxStart 方法中，为什么不在 200 毫秒后开始动画？如果 ajax 请求在 200 毫秒内完成，则不显示任何动画，否则显示动画。代码可能类似于：

var animationController = function animationController()
{
    var timeout = null;
    var delayBy = 200; //Number of milliseconds to wait before ajax animation starts.

    var pub = {};

    var actualAnimationStart = function actualAnimationStart()
    {
        $('#ajaxProgress').show();
    };

    var actualAnimationStop = function actualAnimationStop()
    {
        $('#ajaxProgress').hide();
    };

    pub.startAnimation = function animationController$startAnimation() 
    { 
        timeout = setTimeout(actualAnimationStart, delayBy);
    };

    pub.stopAnimation = function animationController$stopAnimation()
    {
        //If ajax call finishes before the timeout occurs, we wouldn't have 
        //shown any animation.
        clearTimeout(timeout);
        actualAnimationStop();
    }

    return pub;
}();


$(document).ready(
    function()
    {
        $(document).ajaxStart(animationController.startAnimation);
        $(document).ajaxStop(animationController.stopAnimation);
    }
 );