自动拉取数据

html/index.html

@@ -80,6 +80,10 @@
     </div>
     <p id="latestUpdateTime" style="font-size: 12px; display: inline-block; vertical-align: middle;"></p>
     <button id="btn_refresh">重新拉取</button>
+    <label for="auto_refresh">
+        <input type="checkbox" class="filter_checkbox" name="auto_refresh" id="auto_refresh">自动拉取<span
+            id="auto_refresh_countdown"></span>
+    </label>
     <span id="update-finish-info" style="color: green; font-weight: bold; display: none;">数据已更新</span>
     <table id="list"></table>
     <script>
@@ -109,6 +113,9 @@
         const showDetail = document.getElementById("show_detail");
         const showMid = document.getElementById("show_mid");
 
+        const autoRefresh = document.getElementById("auto_refresh");
+
+
         // 绑定按钮点击事件
         btnShowAll.addEventListener('click', function () {
             for (let i = 0; i < filterCheckbox.length; i++) {
@@ -149,10 +156,12 @@
         btnRefresh.onclick = function () {
             getData();
             document.getElementById("update-finish-info").style.display = "";
-            btnRefresh.style.display = "none";
+            // btnRefresh.style.display = "none";
+            btnRefresh.style.visibility = "hidden";
             setTimeout(function () {
                 document.getElementById("update-finish-info").style.display = "none";
-                btnRefresh.style.display = "";
+                // btnRefresh.style.display = "";
+                btnRefresh.style.visibility = "";
             }, 1000);
         };
 
@@ -164,6 +173,30 @@
             };
         }
 
+        let autoRefreshIntreval = null;
+        const autoRefreshCountDownElement = document.getElementById('auto_refresh_countdown');
+        const countDown = 20; // 自动拉取间隔时间，单位：秒
+        let autoRefreshCountDown = countDown;
+        autoRefresh.onchange = function () {
+            if (autoRefresh.checked) {
+                btnRefresh.style.display = "none";
+                btnRefresh.click();
+                autoRefreshIntreval = setInterval(function () {
+                    if ((--autoRefreshCountDown) > 0) {
+                        autoRefreshCountDownElement.innerHTML = `(${autoRefreshCountDown}s)`;
+                    } else {
+                        autoRefreshCountDown = countDown;
+                        btnRefresh.click();
+                        autoRefreshCountDownElement.innerHTML = ``;
+                    }
+                }, 1000);
+            } else {
+                clearInterval(autoRefreshIntreval);
+                btnRefresh.style.display = "";
+                autoRefreshCountDownElement.innerHTML = ``;
+            }
+        };
+
         // 根据屏幕判断要显示哪些字段
         // 此时还未拉取数据，所以进入 render 函数会直接返回，不会多次渲染
         let initWidth = document.body.offsetWidth;