js模擬thread.sleep()函數并實現show loading功能

<!--Loading div-->
<div class="modal" tabindex="100" id="divLoading" backdrop="static" keyboard="false" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered justify-content-center" role="document">
        <span class="fa fa-spinner fa-spin fa-3x text-info"></span><span class="text-info" style="margin-left:5px;font-size:larger;font-weight:bold">列印中...</span>
    </div>
</div>
<!--//.Loading div-->

上述 loading div,注意不要與其它div同處于一相父div下，否則該loading div 有可能被遮擋

我們知道 在同步順序執行的JS代碼段中，要實現類似這種：
show loading…//開始
處理代碼…
hide loading…//結束
是很難實現的。

要實現上述效果，我們通常會使用 setTimeout。

現介紹另外一種模擬thread.sleep()函數并實現showloading功能。

顯示loading -->模擬停頓–>代碼執行–>隱藏loading

以下是代碼，關鍵使用了promise ,async , await ,setTimeout等。

//1. 模擬thread.sleep()函數
  const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));//sleep function
//2.  執行函數
 async function printAttendance() {
 $("#divLoading").modal("show");//show loaing div
            await sleep(1000);//sleep for show loading
              //這里是中間代碼，省略...
            $("#divLoading").modal("hide");
   }

//3.執行
printAttendance（）；