setTimeout 浏览器进入后台时不被冷却的方法

出于节能的考虑, 部分浏览器在进入后台时(或者失去焦点时), 会将 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()

控制台会打印类似的结果

绿色是正常工作时, 每次执行任务间隔约 1000ms
红色是浏览器进入后台时, 每次执行任务间隔约 2000ms

这就是浏览器节能的表现
有时候是些无关紧要的功能, 暂停也好, 延迟也罢, 并无什么大碍
但当我们不希望它暂停时, 怎么才能使 setTimeout 正常工作呢?

解决方法

var c3 = document.createElement("audio")
c3.src = "https://www.runoob.com/try/demo_source/horse.mp3"
c3.volume = 0
// 有些浏览器很严格, 需要设一个极小的音量, 或换一个没有声音的音频文件
c3.loop = true;
c3.play();

var t = new Date() * 1

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

有在网页上看过视频的朋友都知道, 把窗口最小化或激活其它页面, 媒体文件并不会停止播放
这个方法的原理就是理由播放媒体, 让浏览器认为窗口没有进入后台, 从而不对 setTimeout 做出暂停处理

弊端

不过这个方法也有局限性

只适用于PC端
在移动端这个方法不一定有效

播放媒体文件, 必须有用户行为
也就是说代码执行 fun1() 的话会无效, 必须要用 click 之类的事件调用

所以不是万不得已, 并不建议使用这个方法

end