如何實現進度條效果呢 ？

如何實現進度條效果呢 ？

• 效果：點擊頁面的某個按鈕，彈出一個進度條，然後實時顯示進度，直到任務完成。
• 思路：頁面裡面有個隱藏的進度條，點擊按鈕後彈出。ajax迴圈請求數據，直到全部完成
• 難點：ajax的同步請求問題

　　1、首先引入頁面樣式：

   
       .myProgressDiv{
            width:450px;
            border:1px solid #6C9C2C;
            border-radius: 8px;
            height:25px;
        }

        #bar{
            background:#20B2AA;
            float:left;
            height:100%;
            text-align:center;
            line-height:150%;
            border-radius: 8px;
        }
        #maskDiv{
            position: fixed;
            /*top: 0;*/
            top:-150px;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 20;
        }
        #progressBox{
            position: relative;
        }
        #total{
            font-size: 1.2em;
            position: absolute;
            left: 48%;
            top: 10%;
        }    

　　2、頁面 進度條 HTML 元素

<div id="maskDiv" style="display: none">
    <div id="progressBox">
        <div class="myProgressDiv">
            <div id="bar" style="width:0%;"></div>
        </div>
        <span id="total"></span>
    </div>
</div>

　　3、JS 實現

       定義全局的變數 i = 0 , n = 12； 一共請求多少次（伺服器返回）
　　點擊按鈕後

　　$("#maskDiv").show();
　　syncPage();

var bar = document.getElementById("bar");
var total = document.getElementById("total");

function syncPage() {
    if (n < i ) {
        bar.style.width = "100%";
        total.innerHTML = bar.style.width;
        return;
    }
    $.ajax({
        url: ctx + '/../../sync_page_data', //伺服器端請求地址
        method:'post',
        dataType: 'json',
        data:{"offset" : i * 20,"count": 20},
        async: true,
        success: function (data){
            i++;
            if(data && data.flag){
                let progress = Math.ceil(i/n * 100);
                if(progress>99){
                    progress = 99;
                }
                bar.style.width= progress  + "%";
                total.innerHTML = bar.style.width;
                console.info(bar.style.width);
                timeout= window.setTimeout("syncPage()",100);

            }else{
                $("#maskDiv").hide();
                bar.style.width = 0;
                layer.alert('操作失敗：'+data.message, {icon: 2});
            }
        },
        error: function (data, status, e){
            layer.msg('網路錯誤，同步失敗');
        }
    });
}

　　重點： timeout= window.setTimeout("syncPage()",100); 遞歸調用

　　這樣一個完整的進度條就實現了。