<!--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();