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

Question

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

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

Fiddle

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>

我希望发生的事情是，

1. 在点击一个按钮时我们隐藏支票div
2. 我们显示加载 div
3. 进行ajax调用
4. 如果成功做一些事情(重新加载检查div的内容)
5. 隐藏加载部分
6. 显示支票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 block 中，而不是使用 complete.