在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');
    });
};