JavaScript setInterval 導致頁面卡死：改用 setTimeout 遞迴實現非阻塞輪詢

問題現象

點擊按鈕啟動 `setInterval`，每 3 秒更新多個進度條。前 4 次正常，之後頁面凍結（進度條不動），但 Console 仍輸出計數器遞增，說明定時器仍在執行。

根本原因

定時器回調函數執行時間超過間隔時間（3 秒），導致 JavaScript 主線程持續佔用，無法釋放給瀏覽器渲染引擎重繪頁面。 瀏覽器單線程模型下，長時間運行的同步代碼會阻塞 UI 更新。

解決方案：setTimeout 遞迴替代 setInterval

function updateProgress() {
    // ... 原有的 for 迴圈更新進度條邏輯 ...

    // 遞迴安排下一次執行，確保本次完全結束後再排程
    setTimeout(updateProgress, steptime);
}

// 啟動
$("#trybtn").click(function () {
    updateProgress();
});

關鍵差異

補充優化建議

• 若更新邏輯極重，考慮使用 `requestAnimationFrame` 配合時間戳判斷，或 Web Worker 移至背景執行緒。
• 使用 `performance.now()` 監控幀耗時，動態調整間隔。