Question

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

以下是源代码：

js源代码：

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

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

spinner的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，只要代码运行，它就不会移动。

调用后，'spinner'不会出现

1 个答案: