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动作的函数中，它只会在适当的时候自行绑定：

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

Answer 3

选项对象中有一个属性.ajax（）称为全局。

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

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

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选项1}}请求;）

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

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

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

来源ShoutingCode

Answer 8

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

如果要在决定执行操作之前查询请求，请使用ajaxSend和ajaxComplete。请在此处查看我的回复：https://stackoverflow.com/a/15763341/117268

Answer 10

<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请求时，会显示日志消息。

如何在特定的ajax调用上调用.ajaxStart（）

10 个答案: