Блог

У меня есть этот код jQuery:

 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")});
 

Моя проблема в том, что накладка загрузки исчезнет до завершения запроса $.post. Вот консоль, чтобы увидеть, что:

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

Это должно быть:

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

Как я могу это осознать?

Скрытие наложения должно быть выполнено в функции обратного вызова запроса. Я немного изменил код, чтобы он мог работать здесь на Stackoverflow, но обратный вызов тот же.

 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>