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

I have some ajax calls on the document of a site that display or hide a progress bar depending on the ajax status

我在一个显示或隐藏进度条的站点的文档上有一些ajax调用，这取决于ajax的状态。

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

I would like to basically overwirte these methods on other parts of the site where a lot of quick small ajax calls are made and do not need the progress bar popping in and out. I am trying to attach them to or insert them in other $.getJSON and $.ajax calls. I have tried chaining them but apparently that is no good.

我希望将这些方法扩展到站点的其他部分，在这些部分中进行了许多快速的小ajax调用，并且不需要弹出进度条。我试图将它们附加到或插入到其他$中。getJSON和美元。ajax调用。我试过把它们串在一起，但显然这样做不好。

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

10 个解决方案

#1

You can bind the ajaxStart and ajaxStop using custom namespace:

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

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

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

Then, in other parts of the site you'll be temporarily unbinding them before your .json calls:

然后，在站点的其他部分，您将在.json调用之前暂时解绑定它们:

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

Got the idea from here while searching for an answer.

在寻找答案的过程中，我从这里得到了这个想法。

EDIT: I haven't had time to test it, alas.

编辑:唉，我没有时间去测试它。

#2

If you put this in your function that handles an ajax action it'll only bind itself when appropriate:

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

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

#3

There is an attribute in the options object .ajax() takes called global.

在options对象.ajax()中有一个属性叫做global。

If set to false, it will not trigger the ajaxStart event for the call.

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

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

#4

Furthermore, if you want to disable calls to .ajaxStart() and .ajaxStop(), you can set global option to false in your .ajax() requests ;)

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

See more here : How to call .ajaxStart() on specific ajax calls

参见这里的更多内容:如何对特定的ajax调用调用调用.ajaxStart()

#5

Use local scoped Ajax Events

使用本地范围的Ajax事件

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

#6

Unfortunately, ajaxStart event doesn't have any additional information which you can use to decide whether to show animation or not.

不幸的是，ajaxStart事件没有任何额外的信息，您可以使用它来决定是否显示动画。

Anyway, here's one idea. In your ajaxStart method, why not start animation after say 200 milliseconds? If ajax requests complete in 200 milliseconds, you don't show any animation, otherwise you show the animation. Code may look something like:

无论如何,这是一个想法。在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);
    }
 );

#7

use beforeSend or complete callback functions in ajax call like this way..... Live Example is here https://*.com/a/34940340/5361795

在ajax调用中使用前面的或完整的回调函数，就像这样。实例如下:https://*.com/a/34940340/5361795

Source ShoutingCode

源ShoutingCode

#8

Use ajaxSend and ajaxComplete if you want to interspect the request before deciding what to do. See my reply here: https://*.com/a/15763341/117268

如果您想在决定要做什么之前仔细检查请求，请使用ajaxSend和ajaxComplete。请看我的回复:https://*.com/a/15763341/117268

#9

<div class="Local">Trigger</div>

<div class="result"></div>
<div class="log"></div>

$(document).ajaxStart(function() {
$( "log" )text( "Trigger Fire successfully." );
});

$( ".local" ).click(function() {
$( ".result" ).load("c:/refresh.html.");
});

Just Go through this example you get some idea.When the user clicks the element with class Local and the Ajax request is sent, the log message is displayed.

只要看一下这个例子你就知道了。当用户单击带有类Local的元素并发送Ajax请求时，将显示日志消息。

#10

I have a solution. I set a global js variable called showloader (set as false by default). In any of the functions that you want to show the loader just set it to true before you make the ajax call.

我有一个解决方案。我设置了一个名为showloader的全局js变量(默认设置为false)。在您想要显示加载器的任何函数中，只要在进行ajax调用之前将其设置为true。

function doAjaxThing()
{
    showloader=true;
    $.ajax({yaddayadda});
}

Then I have the following in my head section;

然后在我的头部部分有以下内容;

$(document).ajaxStart(function()
{
    if (showloader)
    {
        $('.loadingholder').fadeIn(200);
    }
});    

$(document).ajaxComplete(function() 
{
    $('.loadingholder').fadeOut(200);
    showloader=false;
});