摘要：整理下思路，要獲取異步加載文件的進度要怎么做答將需要異步載入的文件放進一個數組中。通過獲取是否加載完畢怎么繪制一個動態的環形加載圖答需要用到的核心有。

答：將需要異步載入的文件放進一個數組中。如下。

const scriptArr = ["./test_1.js", "./test_3.js", "./test_4.js", "./test_5.js"];

然后動態創建script標簽插入到body標簽中。通過script.onload獲取JS是否加載完畢

答：需要用到的canvas 核心Api有：ctx.arc()。這是繪制園環的必須api.

編寫一個circleProgress類，用來創建環形loading實例

    class CircleProgress {
        constructor(ctxs, width, height, arc) {
            this.ctx = ctxs
            this.width = width
            this.height = height
            this.arc = arc

            this.setArea(width, height)
        }
        //設置canvas的寬高
        setArea(width, height) {
            this.ctx.canvas.width = width
            this.ctx.canvas.height = height
        }
        //清除畫布
        clearFill() {
            this.ctx.clearRect(0, 0, this.width, this.width);
        }
         //繪制環形進度圖的背景 顏色是可配置的 
        fillBg() {
            this.ctx.beginPath();
            this.ctx.lineWidth = this.arc;
            this.ctx.strokeStyle = "#ccc";
            this.ctx.arc(this.width / 2, this.width / 2, 45, 0, 2 * Math.PI);
            this.ctx.stroke();
        }
        //繪制進度條
        fillArc(x) {
            this.ctx.beginPath();
            this.ctx.lineWidth = this.arc;
            this.ctx.strokeStyle = "yellow";
            this.ctx.arc(this.width / 2, this.width / 2, 45, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
            this.ctx.stroke();
        }
        //繪制中心數字展示
        fillText(x) {
            this.ctx.font = "14px" + " Arial";
            this.ctx.fillStyle = "red";
            this.ctx.textBaseline = "middle";
            this.ctx.textAlign = "center";
            this.ctx.fillText(x.toFixed(1) + "%", this.width / 2, this.width / 2);
        }
        //總繪制方法
        fill(x) {
            this.fillBg();
            this.fillArc(x);
            this.fillText(x);
        }

    }

大概就是這個樣子

獲取當前JS，加載進度

    function jsProgress(circle, eachs, max, scriptArr) {
        let currentIndex = 0;
        //遍歷所有文件名
        for (let i = 0; i < scriptArr.length; i++) {
            let scriptNode = document.createElement("script");
            scriptNode.src = scriptArr[i];
            
            //插入創建好的script引用節點
            document.getElementById("bodys").appendChild(scriptNode);
            
            //創建分布值 每個文件占據的進度值 比如4個文件 每個文件占據100/4=25
            let steps = 0;
            
            //插入的文件加載完畢后的回調
            scriptNode.onload = function() {
                //按照每20毫秒一幀渲染canvas畫布 以展示出動態的加載效果
                let ani = setInterval(function() {

                    //此處可以優化，有好的建議可以告訴我
                    if (steps <= max || steps == 100) {
                        circle.clearFill();
                        if (steps > 100) {
                            steps = 100
                        }

                        circle.fill(steps)
                        steps++
                    } else {
                        clearInterval(ani)
                        if (max <= 100) {
                            max = max + eachs
                            currentIndex++;
                        }
                        if (currentIndex == scriptArr.length) {
                            console.log(`全部JS加載完成`)
                        }
                        console.log(`sciprtNode${i}已加載完成`)
                    }
                }, 20)

                
                
            }
        }
    }