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

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> 

我想发生的是

1. 单击按钮，我们将隐藏检查div
2. 我们显示了加载div
3. 拨打ajax电话
4. 如果成功的话（重新加载检查div的内容）
5. 隐藏加载div
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块，而不是使用complete 。

Answer 2

将()添加到函数名称时，它将立即调用它并返回结果。 您想要做的是传递函数本身，而不是函数的结果-并且无需()可以做到这一点。

不需要$.when .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');
    });
};