javascript - Showing a loading div during a jQuery ajax call -

im trying show loading div while waiting ajax call complete. have tried couple of methods cant seem work consistently.

with current code works if have break point on function shows div once ajax complete.

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              },              error: function() {                  //do 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>

what happen is,

1. on click of button hide check div
2. we show loading div
3. make ajax call
4. if successful something(reload contents of check div)
5. hide loading div
6. show check div

as said have tried few methods have found repeatedly stuck loading div shown

thanks

i believe may over-complicating things here. simple suffice:

$('#get').click(function() {     hidecheckshowloading();     $.ajax({        url: https,        datatype: 'jsonp',        type: "get",        success: function (response) {            //do        },        error: function() {            //do else                        },        complete: hideloadingshowcheck    }); }); 

if don't want hideloadingshowcheck routine happen after success or error (standard behavior of complete), can move function call hideloadingshowcheck(); success , error blocks instead of using complete.