'spinner' 在调用后没有立即出现

Question

我正在使用 js 在加载数据时显示等待状态的“微调器”。数据加载完成时调用showWaiting() 显示“微调器”和hideWaiting() 隐藏“微调器”。 'Spinner' 在调用showWaiting() 后没有按预期出现，它仅在数据加载完成后出现（loadData1()）。请帮我。谢谢

以下是源代码：

js源码：

this.showWaiting();
this.loadData1();
this.hideWaiting();
this.function1();

showWaiting: function () {
          $("#progressbar").css("display", "block");
          $("#waiting_popup").show();
          $("#progressbar").progressbar({
              value: false
          });
      }

微调器的html：

<div id="waiting_popup" style="z-index: 999999; position: relative;">
        <div class="ui-widget-overlay ui-front"></div>
        <div id="progressbar" style="width: 300px; margin: 18% auto; display:none;">
            <div style="float: left;margin-left: 35%; margin-top: 5px;font-weight: bold;text-shadow: 1px 1px 0 #fff;">Loading...</div>
        </div>
     </div>

Answer 1

Javascript 是严格的单线程，因此只要您的代码正在运行，浏览器用户界面中就不会发生任何事情。您必须在显示微调器后结束函数，并在浏览器有机会更新界面后使用超时开始加载：

this.showWaiting();
var th = this;
window.setTimeout(function(){
  th.loadData1();
  th.hideWaiting();
  th.function1();
}, 0);

您应该检查是否可以使加载异步。如果您的微调器是动画 gif，那么只要您的代码正在运行，它就不会移动。