你可能不知道的setInterval的坑
你可能不知道的setInterval的坑
之前印象中一直記得setInterval有一些坑，但是一直不是很清楚那些坑是什麼。今天去摸索了下之後，決定來做個記錄以免自己忘記，也希望讓更多人瞭解到這個坑。
-
setInterval會無視程式碼的錯誤。就算遇到了錯誤，它還是會一直迴圈下去，不會停止。這就導致了可能你程式碼裡存在著一些問題（比如你的程式碼可能有個一定概率下會發生的錯誤，而你使用setinterval來迴圈呼叫它，由於setinterval不會因為報錯停止，所以這個問題可能被隱藏），可是卻很難發現。
let count = 1; setInterval(function () { count++; console.log(count); if (count % 3 === 0) throw new Error('setInterval報錯'); }, 1000) -
setInterval會無視任何情況下定時執行。而在有些場景下，我們是不希望如此的。
比如說，我們要實現一個功能，每隔一段時間要向伺服器傳送請求來檢視是否有新資料。此時，若當時使用者的網路狀態很糟糕，客戶端收到請求響應的時間大於interval迴圈的時間。而setInterval會無視任何情況下定時執行，這就會導致了使用者的客戶端裡充斥著ajax請求。
此時正確的做法應該是改用setTimeout,當用戶發出去的請求得到響應或者超時後，再使用setTimeout遞迴傳送下一個請求。這樣就不會有setInterval的坑了。
-
setInterval不能確保每次呼叫都能執行。我們可以先看一個程式碼
const startDate = new Date(); let endData; // 第一個呼叫會被略過 setInterval(() => { console.log('start'); console.log(startDate.getTime()); console.log(endDate.getTime()); console.log('end'); }, 1000); while (startDate.getTime() + 2 * 1000 > (new Date()).getTime()) { } endDate = new Date();我們可以看到，第一次執行的setInterval函式輸出的startDate和endDate差距在2s以上。而我們的setInterval寫的是每間隔1s執行一次。因此，我們可以看出，第一次的setInterval函式呼叫被略過了。
這說明了：如果說你的程式碼執行時間會比較久的話，就會導致setInterval中的一部分函式呼叫被略過。因此你的程式如果依賴於setInterval的精確執行的話，那麼你就要小心這一點了。
當然，其實setTimeout也有這個問題。瀏覽器的定時器都不是精確執行的。就算你呼叫setTimeout(fn, 0)，它也不能確保馬上執行。
解決方案
其實解決方案也很簡單，就是使用setTimeout，然後再setTimeout裡遞迴呼叫。
比如說第一個和第二個坑就可以這樣寫：
function fn () {
setTimeout(() => {
// 程式主邏輯程式碼
// 迴圈遞迴呼叫
fn();
}, 1000);
}
fn();
而第三個坑的話，我們可以在建立計時器的時候，記錄當前呼叫的時間，然後在呼叫的時候，用希望下次延遲的時間減去當前的時間來得到一個比較精確的延遲值動態設定給setTimeout。
我寫了一個簡單的函式來說明這一點：一開始呼叫該函式的時候，會記錄當前的計時器註冊時間，以及一個用來統計計算器呼叫次數的變數。之後在每次呼叫newFn的時候，都會使用預期下次發生的時間減去當前的時間來得到一個精確的delayTime。這樣至少可以保證在一些情況下，計時器可以稍微精確的執行。
function accurateTimers (fn, expectDelayTime) {
let init = false;
let registDate = new Date(); // 計時器註冊時間
let count = 0;// 計時器呼叫次數
function newFn() {
let delayTime;
count++;
if (!init) {
init = true;
delayTime = expectDelayTime;
} else {
delayTime = expectDelayTime * count + registDate.getTime() - new Date().getTime();
}
console.log(delayTime);
setTimeout(() => {
fn();
newFn();
}, delayTime);
}
newFn();
}
accurateTimers(() => console.log('執行'), 1000);
結論
以上，就是本次文章的內容。這篇文章只是做一個簡單的記錄，希望能幫大家瞭解到setInterval的坑的地方，在實際程式設計中可以少走點彎路。如果覺得有用的話，歡迎點個贊或者關注哦。謝謝。