在非Firefox浏览器上按顺序加载动画图形(微调器)

Question

我正在制作一个网页，其中有一个特定功能在Firefox中设计，但在Chrome、Edge或Opera中没有。它是一个html微调器，位于某个弹出式div上，其特征在CSS中定义为：

#popupspinner {
display: none;
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid gray;
width: 40px;
height: 40px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

在某个时刻，我试图显示这个微调器，然后等待其他一些javascript(Ajax(函数处理，然后关闭微调器

function dostuff()
{
popupspinner.style.display = "block";
doingmorestuff1();
doingmorestuff2();
doingmorestuff3();
popupspinner.style.display = "none";
}

问题是，在Firefox中，微调器就像广告中说的那样工作。当用户单击按钮调用dostuff((函数时，微调器显示，然后其他函数运行，然后微调器消失。

然而，在其他所有浏览器中，直到完成doingmorestuffX((函数后，微调器才会启动。我花了一段时间才这么做，但最终我在评论popupspinner.style.display="none"行时发现了这一点。微调器确实显示了，只是在调用其他函数之后才启动。

换句话说，在这些其他浏览器中，它的运行方式就像代码是这样的：

function dostuff()
{
doingmorestuff1();
doingmorestuff2();
doingmorestuff3();
popupspinner.style.display = "block";
popupspinner.style.display = "none";
}

由于这两行代码紧挨着一行，间隔只有几毫秒，因此实际上微调器根本不会出现。

我不知道，但我猜这是其他浏览器为了更快地运行而做的事情

我的问题是，有没有办法强迫这些其他浏览器以正确的顺序运行代码？

编辑：这是完整的代码部分：

function getPropertyInfo()
{
popupspinner.style.display = "block";
setTimeout(function() {
getCoords();
getBasicInfo();
getAscendLegal();
getOwners();
getValues();
getPhotos();
getElectedOfficials();
popupspinner.style.display = "none";
document.getElementById("tab1").className = "nav-link active";
document.getElementById("tab2").className = "nav-link";
document.getElementById("tab3").className = "nav-link";
document.getElementById("tab4").className = "nav-link";
document.getElementById("tab5").className = "nav-link";
basicvalueinfo.style.display = "block";
ownership.style.display = "none";
photos.style.display = "none";
requests.style.display = "none";
electedofficials.style.display = "none";
document.getElementById("container-all").style.display = "block";
});
}

Answer 1

我认为这个问题可能是等待暂停的DOM样式更改的重复

问题是doingmorestuffX函数阻塞了浏览器的主线程，因此没有资源可以使用新样式刷新页面。

最简单的解决方案是在超时后运行代码，这样浏览器就有一些时间重新提交样式更改。请看下面的更正示例：

function dostuff()
{
popupspinner.style.display = "block";
setTimeout(function() {
doingmorestuff1();
doingmorestuff2();
doingmorestuff3();
popupspinner.style.display = "none";
});
}

使用浏览器上方的代码：

• 将CCD_ 2样式应用于CCD_
• 队列的功能是在超时之后运行
• 渲染应用了样式更改的页面(微调器变为可见(
• 从超时队列运行函数
• 应用CCD_ 4样式
• 渲染页面(微调器消失(