Javascript 在非Firefox浏览器上按顺序加载动画图形（微调器）

我有一个我正在制作的网页，其中有一个特定的功能是在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";
}

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

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

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

但是，在其他浏览器中，微调器只有在完成doingmorestuffX（）函数后才能启动。我花了一段时间才这样做，但当我注释掉popupspinner.style.display=“none”行时，我终于明白了这一点。微调器确实显示了，它只是在调用其他函数之后才启动

换句话说，在这些其他浏览器中，它运行的代码如下所示：

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

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

     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";
    });
}

---

我认为这个问题可能是重复的

问题是您的

doingmorestuffX

函数阻塞了浏览器的主线程，因此没有可用的资源来刷新应用了新样式的页面

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

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

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

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

使用浏览器上方的代码：

• 将

  block

  样式应用于

  popupspinner

  元素
• 要在超时后运行的队列函数
• 在应用样式更改的情况下呈现页面（微调器变为可见）
• 从超时队列运行函数
• 应用

  none

  样式
• 呈现页面（微调器消失）

---

这是否回答了您的问题？谢谢，这（大部分）奏效了。在popupspinner.style.display=“none”行之后，我必须将setTimeout函数的结尾移到其他一些东西下面，才能使它正常工作。它在Chrome中工作，在Edge中工作（旋转器不旋转），在Firefox中仍然工作，但在Opera中不工作。我想知道Opera的广告拦截器是否与此有关？？欢迎！是的，如果你以后要做更多的事情，你可能会想将所有内容都移动到setTimeout，以避免主线程阻塞。@JohnA你能把我的答案标记为正确吗？@JohnA歌剧问题很奇怪-我正在制作歌剧，一切都按预期进行。我想这不应该是adblocker的问题。你能发布一些失败的例子吗？这里有一个链接，指向我正在处理的项目的测试版本：