Tengo este código 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")});Mi problema es que loadingOverlay desaparecerá antes de que finalice la solicitud $ .post. Aquí la consola para ver que:
Show LoadingOverlay 10:8:16 Hide LoadingOverlay 10:8:16 My Response 10:8:20Debería ser:
Show LoadingOverlay 10:8:16 My Response 10:8:16 Hide LoadingOverlay 10:8:20¿Cómo puedo darme cuenta?
Ocultar la superposición debe hacerse en la función de devolución de llamada de la solicitud. Cambié un poco el código para que pueda ejecutarse aquí en Stackoverflow, pero la devolución de llamada es la misma.
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>