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?
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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loadingOverlay">overlay</div>