调用同步请求时JS/CSS不工作

Question

我完成了一个Alfresco but脚本的开发，但是我对CSS动画和HTML属性/innerHTML有一些问题，它们正在使用JS进行更新。

webscript从DB获取用户列表，然后，当文档准备就绪时，它开始执行同步(阻塞)调用，为找到的每个用户检索所有文档，每个用户一个调用，调用完成后，它将响应( HTML)附加到一个表，然后查找数组中的下一个用户。同时，我使用Bootstrap进度条和实时文档计数创建了一个加载屏幕，并使用innerHTML将其覆盖为正在找到的所有文档的总和，代码如下：

   function execDocsWebscript(user)
   {
       init_XMLHttpRequest();
       doRequest("url"+user, 'GET', appendRespData);
   }

   function doProgress(i)
   {
       currentProgress = (i/userArray.length)*100; //Current Progress in percentage

       var progBar = document.getElementById('progBar'); //Select the progress bar, then update attributes
       progBar.setAttribute('aria-valuenow',currentProgress);
       progBar.setAttribute('style','width:'+currentProgress+'%');
       progBar.innerHTML = Math.round(currentProgress)+'%';
       if(currentProgress == 100)
       {
           document.getElementById('progText').innerHTML = "DONE!";
       }
   }

   function appendRespData()
   {
       if (peticionHTTP.readyState == 4)
       {
           if (peticionHTTP.status == 200)
           {
               docLength = AJAXParser(peticionHTTP); //Return the no. of documents for the user
               totalDocLength += +docLength; //Sum up the total
               //Append response to HTML Table
               document.getElementById('tbody').insertAdjacentHTML('beforeend',peticionHTTP.responseText);
              //Update total document count in the loading screen
              document.getElementById('loadingDocuCount').innerHTML = "Documents found: "+totalDocLength; 
           }   
       }       
   }

   function showSlowly()
   {
       var i = 1;
       for (const element of userArray)
       {
           window.onload = execDocsWebscript(element); //Wait for the document to load, then do AJAX requests
           doProgress(i); //Update the progress bar
           i++;
       }
   }

这在FireFox中工作得很好，加载栏会相应地进行，文档计数也会相应地更新，但如果脚本运行在Chrome或Edge上，情况就不一样了，加载栏甚至不会启动，文档计数始终为0，不过如果您想要足够的时间，加载栏会跳到100%，progText elements的innerHTML会变为"DONE!“并且脚本可以正确加载，所以最终它可以正常工作，除了动画和实时文档计数器。

最后，我有一个小的CSS动画，3个跳动点，这在Chrome和Edge中都不起作用，我尝试添加-webkit- tag但不起作用，下面是代码：

<style>
.jumping-dots span {
      position: relative;
      bottom: 0px;
      animation: jump 2s infinite;
      -webkit-animation: jump 2s infinite;
    }
    
    .jumping-dots .dot-1{
      animation-delay: 200ms;
    }
    .jumping-dots .dot-2{
      animation-delay: 400ms;
    }
    .jumping-dots .dot-3{
      animation-delay: 600ms;
    }
    
    @-webkit-keyframes jump {
      0%   {bottom: 0px;}
      20%  {bottom: 5px;}
      40%  {bottom: 0px;}
    }
    
    @-moz-keyframes jump {
      0%   {bottom: 0px;}
      20%  {bottom: 5px;}
      40%  {bottom: 0px;}
    }
    
    @-o-keyframes jump {
      0%   {bottom: 0px;}
      20%  {bottom: 5px;}
      40%  {bottom: 0px;}
    }
    
    @keyframes jump {
      0%   {bottom: 0px;}
      20%  {bottom: 5px;}
      40%  {bottom: 0px;}
    }
</style>
...
<p class="h3 text-center" id="progText">Fetching documents for each user<span class="jumping-dots">
    <span class="dot-1">.</span>
    <span class="dot-2">.</span>
    <span class="dot-3">.</span>
    </span>
</p>

我该如何解决这个问题呢？是什么导致了这种情况？我相信这两个浏览器不会在页面加载时播放动画(当AJAX请求正在运行时)，但我一点也不确定。

以下是一些屏幕截图，这是它在Edge/Chrome中加载时的外观：

​

这是Firefox的版本：

​

Answer 1

感谢@ChrisG解决了这个问题，只是不要使用同步请求，否则在请求完成之前，其余的元素都不会更新。