等待页面加载直到方法完成

Question

当网页加载时，我的网页的Javascript正在执行下面所示的代码。get的调用可能需要几秒钟，因此我想等待加载页面，直到调用完成。

是否可以将页面加载推迟到调用结束?或者更好的方法是显示一些转轮(而不是白页)，以便用户意识到某些过程正在进行。这可能吗?

document.addEventListener("DOMContentLoaded", function(){
if (!sessionStorage.getItem("userID")) {
// Get new userID
$.get("/new_user").done(function (data) {
sessionStorage.setItem("userID", data);
});
}
});

Answer 1

我不确定你的实现与事件监听器"DOMContentLoaded"是正确的，我认为我们在这里遗漏了一些上下文，你可以在此之前检查会话存储，但我将假设这部分是正确的，并解决你关于加载旋转器的问题。

我也不会详细介绍如何制作加载微调器，因为有很多例子。但要让你的页面在ajax调用时成为加载微调器我会让函数异步并在调用之前将页面的html设置为加载微调器，然后在等待调用之后，设置数据然后在加载完成后将html设置为你想要的

document.addEventListener('DOMContentLoaded', async (event) => {
if (!sessionStorage.getItem("userID")) {
document.getElementById('container').innerHTML = '<div>loadspinnerhtml</div>';
var data = await $.get("/new_user")
sessionStorage.setItem("userID", data);
document.getElementById('container').innerHTML = '<div>theloadedhtml</div>'
}
});