在非 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) 函数处理，然后关闭微调器。我的 javascript 是这样的：

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

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

     popupspinner.style.display = "none";
}

问题是，在 Firefox 中，微调器的工作方式与宣传的一样。当用户单击按钮调用 dostuff() 函数时，微调器显示，然后其他函数运行，然后微调器消失。

然而，在其他所有浏览器中，直到 在 domorestuffX() 函数完成后，微调器才会启动。我花了一段时间才这样做，但最终当我注释掉 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 style change waiting for pause重复

问题在于您的 doingmorestuffX 函数阻塞了浏览器的主线程 - 因此没有资源可用于刷新应用了新样式的页面。

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

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

     setTimeout(function() {
          doingmorestuff1();
          doingmorestuff2();
          doingmorestuff3();

          popupspinner.style.display = "none";
     });
}

用浏览器上面的代码：

• 将block 样式应用于popupspinner 元素，
• 队列函数在超时后运行，
• 呈现应用了样式更改的页面（微调器变为可见），
• 从超时队列运行函数，
• 应用none 样式，
• 呈现页面（微调器消失）。