你知道 JavaScript 的 setTimeout() 與 setInterval() 有拖延症嗎?

如果要在前端等待特定時間後某些工作,或者定期執行某些工作,都是用 setTimeout()setInterval() 達成需求。

不過使用這 2 個函式的最大誤區是認為它會準時執行⋯⋯。

是的,它們不保證可以準時在特定時間後執行,或者定期執行!

所以千萬別以為寫了個 60 秒後執行的工作,它就會在 60 秒後準時執行,如果它所在的分頁是 inactive 分頁(也就是使用者沒在使用的分頁),那很有可能會拖得比 60 秒更久!

這個不準時的特性就導致 1 個問題,那就是要在網頁用 JavaScript 做到準時的計時器或者倒數計時器是相當難的 1 件事,頂多只能逼近,無法 100% 準時。

所以如果你有功能對於執行時間精準度相當要求,那可能要考慮用其他手段達成。

MDN 文件中也羅列幾種情況可能導致 setTimeout()setInterval() 不準時:

  1. 巢狀(nested)呼叫 setTimeout() 的情況,在這種情況之下,如果呼叫超過 4 次,第 5 次起瀏覽器會強制設定最小延遲 4ms
  2. Inactive 分頁, Chrome 與 FireFox Desktop 對於 Inactive 分頁都有最小 1s 的延遲設定,所以對 Inactive 分頁來說 setTimeout() 就算設定小於 1s 也沒用⋯⋯ (但如果分頁正在播放音效,是有可能擺脫這個限制,還是老話一句,各家瀏覽器實作不一樣⋯⋯)
  3. FireFox 會強制對某些被認為是 tracking scripts (追蹤使用者行為的 scripts)設定延遲
  4. 如果你的網頁正在忙其他工作,也可能導致 setTimeout()setInterval() 不準時
  5. FireFox 在網頁還在 loading 的狀態下,也會延遲 setTimout() 初次執行

所以有人來問你怎麼 setTimeout() , setInterval() 為什麼沒有準時執行時,請告訴他/她瀏覽器也有拖延症是很正常的事,並且給他/她 MDN 文件拜讀一下!

setTimeout() - Reasons for delays longer than specified

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

追蹤新知

看完這篇文章了嗎?還意猶未盡的話,追蹤粉絲專頁吧!

我們每天至少分享 1 篇文章/新聞或者實用的軟體/工具,讓你輕鬆增廣見聞提升專業能力!如果你喜歡我們的文章,或是想了解更多特定主題的教學,歡迎到我們的粉絲專頁按讚、留言讓我們知道。你的鼓勵,是我們的原力!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!