如何在特定的 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

如果您想在决定做什么之前检查请求，请使用 ajaxSend 和 ajaxComplete。 请参阅我的回复：https://stackoverflow.com/a/15763341/117268

Answer 2

<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.");
});

通过这个例子你就会得到一些想法。当用户单击类为 Local 的元素并且发送 Ajax 请求时，将显示日志消息。

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 在 .ajax() 请求中选择 false ;)

在此处查看更多信息：如何在特定的 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);
    }
 );

Answer 7

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

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

然后我的头部有以下内容；

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

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

Answer 8

像这样在ajax调用中使用beforeSend或完成回调函数......
现场示例在这里
https://stackoverflow.com/a/34940340/5361795

来源ShoutingCode

Answer 9

2018 注意：此答案已过时； 请随意提出对此答案的可行修改。

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

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

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

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

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

从 此处，同时搜索答案。

编辑：我还没有时间测试它，唉。

Answer 10

选项对象 .ajax() 中有一个名为 global 的属性。

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

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