javascript - 「スピナー」は、呼び出した直後に表示されません

Question

データをロードするときに待機状態の「スピナー」を表示するために js を使用しています。showWaiting()「スピナー」hideWaiting()を表示し、データのロードが完了したときに「スピナー」を非表示にするために呼び出します。「スピナー」は、呼び出し後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>