2

我有这个 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")});

我的问题是，loadingOverlay 将在 $.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

我怎样才能意识到它？

4

1 回答 1

1

隐藏覆盖应该在请求的回调函数中完成。我稍微更改了代码，以便它可以在 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>

于 2021-08-14T08:30:49.923 回答