技術標籤：實際應用JavaScript

出於節能的考慮, 部分瀏覽器在進入後臺時(或者失去焦點時), 會將 setTimeout 等定時任務暫停
待使用者回到瀏覽器時, 才會重新啟用定時任務
說是暫停, 其實應該說是延遲, 1s 的任務延遲到 2s, 2s 的延遲到 5s, 實際情況因瀏覽器而異

在 Chrome 中執行一下程式碼

var t = new Date() * 1

function fun1() {
	var _t = new Date() * 1
	console.log(_t - t)
	t = _t
	setTimeout(fun1, 1000)
}
fun1()

控制檯會列印類似的結果

這就是瀏覽器節能的表現
有時候是些無關緊要的功能, 暫停也好, 延遲也罷, 並無什麼大礙
但當我們不希望它暫停時, 怎麼才能使 setTimeout 正常工作呢?

解決方法

var c3 = document.createElement("audio")
c3.src = "https://www.runoob.com/try/demo_source/horse.mp3"
c3.volume = 0
// 有些瀏覽器很嚴格, 需要設一個極小的音量, 或換一個沒有聲音的音訊檔案
 


var t = new Date() * 1

function fun1() {
	var _t = new Date() * 1
	console.log(_t - t)
	t = _t
	c3.play()
	setTimeout(fun1, 1000)
}
// fun1()

有在網頁上看過視訊的朋友都知道, 把視窗最小化或啟用其它頁面, 媒體檔案並不會停止播放
這個方法的原理就是理由播放媒體, 讓瀏覽器認為視窗沒有進入後臺, 從而不對 setTimeout 做出暫停處理

弊端

不過這個方法也有侷限性

只適用於PC端
在移動端這個方法不一定有效

播放媒體檔案, 必須有使用者行為
也就是說程式碼執行 fun1() 的話會無效, 必須要用 click 之類的事件呼叫

所以不是萬不得已, 並不建議使用這個方法

end