在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. 隱藏加載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（假設HideCheckShowLoading（）不會使Ajax調用，jQuery的動畫工作方式不同），並且$.ajax返回的承諾本身，因此您可以更新您的代碼：

$(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()櫃面它仍然從顯示隱藏動畫：

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