获取动画图形（微调器）以在非Firefox浏览器中依次加载

Question

我正在制作一个网页，其中某个特定功能可以在Firefox中设计，但不能在Chrome，Edge或Opera中使用。它是位于某个弹出式div上的html微调框，其特征在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）函数处理，然后关闭微调器。我的JavaScript是这样的：

function dostuff()
{
     popupspinner.style.display = "block";

     doingmorestuff1();
     doingmorestuff2();
     doingmorestuff3();

     popupspinner.style.display = "none";
}

问题是，在Firefox中，微调器如所宣传的那样工作。当用户单击按钮来调用dostuff（）函数时，微调框将显示，然后其他功能运行，然后微调框将消失。

但是，在其他所有浏览器中，微调器只有在完成[moremorestuffX（）函数之后，才会启动。我花了一些时间来做，但是当我注释掉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";
    });
}

我正在制作一个网页，其中某个特定功能可以在Firefox中设计，但不能在Chrome，Edge或Opera中使用。这是位于某个弹出式div上的html微调框，其div ......>

Answer 1

我认为这个问题可能是DOM style change waiting for pause的副本

问题是您的doingmorestuffX函数阻止了浏览器的主线程-因此，没有剩余资源来刷新应用了新样式的页面。