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

在寻找答案时从here 得到这个想法。

编辑：唉，我还没来得及测试它。

Answer 2

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

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

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

Answer 3

使用本地范围的 Ajax 事件

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

Answer 4

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

来源ShoutingCode

Answer 5

我有一个解决方案。 我设置了一个名为 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 6

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

如果您将其放入处理 ajax 操作的函数中，它只会在适当时绑定自身：

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

Answer 8

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

Answer 9

此外，如果您想禁用对.ajaxStart()和.ajaxStop()的调用，您可以在.ajax()请求中将global选项设置为false；）

在此处查看更多信息：How to call .ajaxStart() on specific ajax calls

Answer 10

很遗憾，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);
    }
 );