Loading Circle will disappear before request is finish

Question

I have this jQuery code:

var now = new Date(Date.now());
console.log("Show LoadingOverlay "+now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());
            
$( ".loadingOverlay" ).css("display", "block").animate({"opacity": 0.9});       
$.post("myFile.php", {date: true}, function(response) {    
  var now = new Date(Date.now());
  console.log("My Response "+now.getHours() + ":" + now.getMinutes() + ":" +   now.getSeconds());
});
                    
var now = new Date(Date.now());
console.log("Hide LoadingOverlay "+now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());
$( ".loadingOverlay" ).animate({"opacity": 0}, 500, function() {$( ".loadingOverlay" ).css("display", "none")});

My problem is, that the loadingOverlay will disappear before the $.post request is finish. Here the console to see that:

Show LoadingOverlay 10:8:16
Hide LoadingOverlay 10:8:16
My Response 10:8:20

It should be:

Show LoadingOverlay 10:8:16
My Response 10:8:16
Hide LoadingOverlay 10:8:20

How can I realize it?

user_322084 · Answer

Hiding the overlay should be done in the call back function of the request. I changed the code a bit so that it can run here on Stackoverflow but the callback is the same.

var now = new Date(Date.now());
console.log("Show LoadingOverlay " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());

$(".loadingOverlay").css("display", "block").animate({
  "opacity": 0.9
});
$.post("data:text/plain;base64,dGV4dA==", function(response) {
  var now = new Date(Date.now());
  console.log("My Response " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());

  var now = new Date(Date.now());
  console.log("Hide LoadingOverlay " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());
  $(".loadingOverlay").animate({
    "opacity": 0
  }, 500, function() {
    $(".loadingOverlay").css("display", "none")
  });
});

.loadingOverlay {
  display: none;
}


overlay

Loading Circle will disappear before request is finish

1 Answers