Question

我试图在等待ajax调用完成时显示加载div。我尝试了几种方法，但似乎无法始终如一地工作。

使用我当前的代码，如果我在ajax完成后显示div的函数有一个断点，它就可以工作。

var https = 'https://www.googleapis.com/calendar/v3/calendars/';

function HideCheckShowLoading(checkId) {
    $("#check_" + checkId).hide('slow', function() {
        $("#loading_" + checkId).show('slow');
    });
};

function HideLoadingShowCheck(checkId) {
    $("#loading_" + checkId).finish().hide('slow', function() {
        $("#check_" + checkId).finish().show('slow');
    });
};
$(document).ready(function() {
    $('#get').click(function() {
        HideCheckShowLoading(1);
        $.ajax({
            url: https,
            dataType: 'jsonp',
            type: "GET",
            success: function(response) {
                //do something
            },
            error: function() {
                //do something else                
            }
        }).done(function() {
            HideLoadingShowCheck(1)
        });

    });
    $('#get2').click(function() {
        HideLoadingShowCheck(1);
    });

});

#check_1
 {
    background-color:red;
}

#loading_1
 {
    background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="check_1">Check</div>
<div hidden id="loading_1">LOADING</div>
<button id="get">Get</button>
<button id="get2">Get2</button>

我想要发生的是，

点击按钮我们隐藏了check div
我们显示加载div
进行ajax调用
如果成功做某事（重新加载check div的内容）
隐藏加载div
显示check div

如上所述，我已经尝试了一些我已经找到的方法但是我反复被卡住了显示的加载div

由于

Answer 1

我相信你可能会在这里略微过于复杂。像这样的简单就足够了：

$('#get').click(function() {
    HideCheckShowLoading();
    $.ajax({
       url: https,
       dataType: 'jsonp',
       type: "GET",
       success: function (response) {
           //do something
       },
       error: function() {
           //do something else                
       },
       complete: HideLoadingShowCheck
   });
});

如果您不希望在HideLoadingShowCheck或success之后发生error例程（complete的标准行为），您只需移动一个函数调用HideLoadingShowCheck(); success和error版块中的complete，而不是DateComponents。

Answer 2

将()添加到函数名称时，会立即调用它并返回结果。你想要做的是传递函数本身，而不是函数的结果 - 并且你在没有()的情况下完成。

不需要$.when（假设HideCheckShowLoading（）不进行ajax调用，jquery动画的工作方式不同），$.ajax返回promise本身，因此您可以更新代码到：

$(document).ready(function() {
    $('#get').click(function() {
        HideCheckShowLoading();
        $.ajax({
           url: https,
           dataType: 'jsonp',
           type: "GET",
           success: function (response) {
               //do something
           },
           error: function() {
               //do something else                
           }
        }) 
        //.done(HideLoadingShowCheck);
        .done(function() { HideLoadingShowCheck(otherparams); })
    });
});

我会更改showcheck函数以添加.finish()，因为它仍然可以从showhide中动画：

function HideLoadingShowCheck() {
    $("#loading").finish().hide('slow',function () {
        $("#check").finish().show('slow');
    });
};

在jQuery ajax调用期间显示加载div

2 个答案: