前端輪詢時，如何“智能”地調整請求間隔？
輪詢（Polling）是一種長久而有效的技術，用于從服務器獲取最新數據，例如訂單狀態(tài)、消息通知、實時報表等。最簡單的實現(xiàn)方式是使用 setInterval，每隔固定時間就發(fā)送一次請求。
// 簡單粗暴的輪詢
setInterval(fetchOrderStatus, 2000); // 每2秒查詢一次這種輪詢方式存在諸多弊端：
- 資源浪費：無論數據是否更新，無論用戶是否在看，請求都會不間斷地發(fā)送。
- 服務器壓力：成千上萬個客戶端以高頻率輪詢，會對服務器造成巨大壓力。
- 請求重疊：如果一個請求的響應時間超過了輪詢間隔（例如網絡慢），新的請求就會在舊的請求還未完成時發(fā)出，導致請求堆積。
那么，我們如何讓輪詢變得“智能”起來，既能及時獲取數據，又能最大化地節(jié)省資源呢？
策略一：使用 setTimeout 替代 setInterval（基礎優(yōu)化）
這是最基礎也是最重要的改進。setInterval 不關心上一次請求是否完成，它只會死板地按時執(zhí)行。而通過遞歸調用的 setTimeout，我們可以確保下一次請求一定是在上一次請求完成之后再發(fā)起。
優(yōu)點：完美解決了請求重疊的問題，保證了請求的順序性和間隔的有效性。
策略二：指數退避（Exponential Backoff）- 優(yōu)雅地處理錯誤
當服務器出現(xiàn)故障或網絡中斷時，如果客戶端仍然以固定頻率不斷請求，這無異于“傷口上撒鹽”。指數退避策略可以在出現(xiàn)錯誤時，逐步增加輪詢的間隔，待服務恢復后再恢復正常頻率。
let errorCount = 0;
const BASE_INTERVAL = 2000; // 基礎間隔2秒
const MAX_INTERVAL = 60000; // 最大間隔60秒
function pollWithBackoff() {
fetch('/api/fedjavascript')
.then(res => {
if (!res.ok) throw new Error('服務器響應異常');
return res.json();
})
.then(data => {
// 成功后，重置錯誤計數器和間隔
errorCount = 0;
console.log('數據獲取成功:', data);
scheduleNextPoll();
})
.catch(error => {
// 失敗后，增加錯誤計數器
errorCount++;
console.error('請求失敗，將延長下次請求時間');
scheduleNextPoll();
});
}
function scheduleNextPoll() {
// 計算退避間隔：2s, 4s, 8s, 16s... 直到最大值
const interval = Math.min(BASE_INTERVAL * Math.pow(2, errorCount), MAX_INTERVAL);
setTimeout(pollWithBackoff, interval);
console.log(`下一次請求將在 ${interval / 1000} 秒后發(fā)起`);
}
// 啟動
scheduleNextPoll();優(yōu)點：在系統(tǒng)不穩(wěn)定時能顯著降低客戶端和服務器的壓力，實現(xiàn)“智能容錯”。
策略三：利用 Page Visibility API - 當用戶“不在看”時放慢節(jié)奏
如果用戶切換到了其他瀏覽器標簽頁，或者最小化了瀏覽器，我們還有必要以高頻率輪詢嗎？顯然沒有。Page Visibility API 可以告訴我們頁面是否對用戶可見。
let pollerId; // 用于存儲 setTimeout 的 ID
function scheduleNextPoll() {
// 如果頁面不可見，使用更長的輪詢間隔（例如30秒）
const interval = document.hidden ? 30000 : 2000;
clearTimeout(pollerId); // 清除舊的定時器
pollerId = setTimeout(pollWithBackoff, interval);
console.log(`頁面${document.hidden ? '不可見' : '可見'}。下一次請求將在 ${interval / 1000} 秒后發(fā)起`);
}
// 監(jiān)聽頁面的可見性變化
document.addEventListener('visibilitychange', () => {
// 當頁面從隱藏變?yōu)榭梢姇r，可以立即觸發(fā)一次輪詢
if (!document.hidden) {
console.log('頁面恢復可見，立即執(zhí)行一次輪詢');
pollWithBackoff();
} else {
console.log('頁面已切換到后臺');
}
});
// 啟動
scheduleNextPoll();優(yōu)點：極大地節(jié)省了用戶設備的 CPU 和電量，也減少了不必要的服務器請求。這是現(xiàn)代 Web 應用優(yōu)化的一個重要手段。
雖然我們可以讓輪詢變得非常智能，但它本質上仍然是“客戶端拉取”模型。對于嚴格要求實時性的場景，現(xiàn)代技術也為我們提供了其他的選擇：
- WebSockets：建立一個持久的雙向連接。服務器可以隨時主動向客戶端推送數據，無需客戶端反復詢問。這是實時聊天、在線游戲等場景的首選。
- Server-Sent Events (SSE)：一個輕量級的 WebSocket 替代品，用于從服務器到客戶端的單向數據流。非常適合用來推送狀態(tài)更新、新聞源等。
從簡單的 setInterval 到綜合運用多種策略的智能輪詢，再到最終選擇 WebSockets 或 SSE，技術的演進體現(xiàn)了對性能、用戶體驗和系統(tǒng)健壯性的不懈追求。
