為什麼盡量別用 setInterval

在開發一個在線聊天工具時，經常會有過多少毫秒就重複執行一次某操作的需求。「沒問題」，大家都說，「用setInterval好了。」我覺得這個點子很糟糕。

原因之一：setInterval無視代碼錯誤

setInterval有個討厭的習慣，即對自己調用的代碼是否報錯這件事漠不關心。換句話說，如果setInterval執行的代碼由於某種原因出了錯，它還會持續不斷（不管不顧）地調用該代碼。看演示

原因之二：setInterval無視網路延遲

假設你每隔一段時間就通過Ajax輪詢一次伺服器，看看有沒有新數據（注意：如果你真的這麼做了，那恐怕你做錯了；建議使用「補償性輪詢」（backoff polling））。而由於某些原因（伺服器過載、臨時斷網、流量劇增、用戶帶寬受限，等等），你的請求要花的時間遠比你想像的要長。但setInterval不在乎。它仍然會按定時持續不斷地觸發請求，最終你的客戶端網路隊列會塞滿Ajax調用。看示例

原因之三：setInterval不保證執行

與setTimeout不同，你並不能保證到了時間間隔，代碼就准能執行。如果你調用的函數需要花很長時間才能完成，那某些調用會被直接忽略。看示例

解決之道很簡單：用setTimeout

與其使用setInterval，不如在適當的時刻通過setTimeout來調用函數自身。在前面兩個示例中，使用setInterval的函數a都出錯了，而使用setTimeout的函數b則表現很好。

如果必須保證間隔相等怎麼辦？

如果確實要保證事件「勻速」被觸發，那可以用希望的延遲減去上次調用所花時間，然後將得到的差值作為延遲動態指定給setTimeout。 不過，要注意的是JavaScript的計時器並不是非常精確。因此你不可能得到絕對「平均」的延遲，即使使用setInterval也不行，原因很多（比如垃圾回收、JavaScript是單線程的，等等）。此外，當前瀏覽器也會將最小的超時時間固定在4ms到15ms之間。因此不要指望一點誤差也沒有。

譯者：為之漫筆

https://www.zcfy.cc/article/why-i-consider-setinterval-to-be-harmful-zetafleet

---- 廣告----

給大家推薦個活躍的開發者社區：掘金是面向程序員的的技術社區，從大廠技術分享到前端開發最佳實踐，掃二維碼下載掘金APP，來掘金你不會錯過任何一個技術乾貨。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！