处理弱网下资源加载失败情况

src/index.html

@@ -20,8 +20,9 @@
         <div id="sidebar" style="display: none;">
             <div id="control-div">
                 <div style="text-align: center;">
-                    <input id="array-input" style="width: 100%; text-align: center;" type="text" value="" oninput="updateListDataArray('array-sort-algorithm', { doNotAlert: true })"/>
+                    <input id="array-input" style="width: 100%; text-align: center;" type="text" value=""
-                    <input type="button" value="随便来一个" onclick="randomListDataArray('array-sort-algorithm')"/>
+                        oninput="updateListDataArray('array-sort-algorithm', { doNotAlert: true })" />
+                    <input type="button" value="随便来一个" onclick="randomListDataArray('array-sort-algorithm')" />
                 </div>
                 <!-- 排序算法按钮 -->
             </div>
@@ -90,24 +91,75 @@
                 document.body.appendChild(_el);
             }
         }
+
+        /**
+         * 处理弱网情况下 d3, gsap 资源加载失败情况
+         */
+        // 自定义原地等待函数
+        const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
+
+        // 检查对象是否为 null ，以判断资源是否加载成功
+        function checkObjectExist(typeofObject, retryCount, scriptId, localUrl) {
+            if (typeofObject === "undefined") {
+                if (retryCount[scriptId] == null) {
+                    retryCount[scriptId] = 1
+                } else {
+                    retryCount[scriptId]++
+                }
+
+                // if (retryCount[scriptId] === 3) {
+                //     var scriptElement = document.getElementById(scriptId)
+                //     loadScript(localUrl, scriptElement)
+                //     if (scriptElement)
+                //         scriptElement.parentNode.removeChild(scriptElement)
+                // }
+
+                if (retryCount[scriptId] === 4)
+                    document.getElementById("container").innerHTML = "加载时间比预想的要长，若长时间无响应，请尝试刷新页面..."
+
+                if (retryCount[scriptId] === 8) {
+                    alert(`网页脚本未能成功加载，长时间未加载成功请刷新重试`)
+                }
+
+                if (retryCount[scriptId] > 10) {
+                    throw Error("多次尝试，但仍未成功，不再尝试")
+                }
+                console.log(scriptId)
+                console.error(`资源 [${scriptId}] 未能加载`, retryCount)
+                return false
+            }
+            return true
+        }
+
+        async function libLoadCheck() {
+            var retryCount = {}
+            // 如果没有成功加载，那么原地等待上方fallback加载本地js
+            while (!checkObjectExist(typeof (d3), retryCount, "script-d3", "./assets/lib/d3/7.4.4/d3.min.js"))
+                await sleep(1000)
+            while (!checkObjectExist(typeof (gsap), retryCount, "script-gsap", "./assets/lib/gsap/3.10.4/gsap.min.js"))
+                await sleep(1000)
+            loadScript("./assets/js/index.js")
+            console.log("基础资源加载成功")
+        }
+        setTimeout(libLoadCheck, 500)
     </script>
 
     <!-- D3.js refer: https://d3js.org/ -->
-    <script src="https://cdn.staticfile.org/d3/7.4.4/d3.min.js" local-src="./assets/lib/d3/7.4.4/d3.min.js"
+    <script id="script-d3" src="https://cdn.staticfile.org/d3/7.4.4/d3.min.js"
-        onerror="errorload(this);"></script>
+        local-src="./assets/lib/d3/7.4.4/d3.min.js" onerror="errorload(this);"></script>
 
     <!-- GSAP refer: https://greensock.com/docs/v3/Installation -->
-    <script src="https://cdn.staticfile.org/gsap/3.10.4/gsap.min.js" local-src="./assets/lib/gsap/3.10.4/gsap.min.js"
+    <script id="script-gsap" src="https://cdn.staticfile.org/gsap/3.10.4/gsap.min.js"
-        onerror="errorload(this);"></script>
+        local-src="./assets/lib/gsap/3.10.4/gsap.min.js" onerror="errorload(this);"></script>
 
     <!-- class -->
-    <script src="./assets/js/class.js"></script>
+    <script id="script-class" src="./assets/js/class.js"></script>
 
     <!-- 排序算法 -->
     <script src="./assets/js/algorithm/sort.js"></script>
 
     <!-- 主script -->
-    <script src="./assets/js/index.js"></script>
+    <!-- <script src="./assets/js/index.js"></script> -->
 
     <!-- 算法测试 -->
     <!-- <script src="./assets/js/algorithm/test.js"></script> -->