在后台标签页里也能跑的计时器(以及为什么有些不行)
节流问题
浏览器通过限制后台 Tab 里的 JavaScript 来省电,而每家浏览器画的那条线都不一样。动画帧几乎立刻停止,所以任何基于视觉循环搭建的计时器都会跑偏或卡死。而基于墙钟时间的计时器——倒计时是用当前的真实时间算出来的,而不是把过去的秒数一格一格数出来的——即使 Tab 被节流也依然走得准,因为浏览器仍会定期唤醒它们去做检查。
后台里什么活得下来
基于 setInterval 的计时器在后台 Tab 里会被压到大约每秒触发一次、甚至更慢,但它们终究还是会触发,这就是为什么一个做得好的计时器依然在走,只是数字的平滑滚动变得卡顿。声音提醒是另一个风险:除非该 Tab 已经有过用户交互,否则有些浏览器会阻止未访问过的后台 Tab 发声。你点击过才启动的计时器页面算交互过,它的闹铃会响;一个自己启动自己的计时器就没这么走运了。
用通知兜底
最可靠的浏览器计时器会同时触发页内闹铃和系统通知,这样即使浏览器窗口被最小化、或者你正在别的应用里,提醒也能送到你手上。通知权限会在首次使用时申请。对长倒计时(一小时或更久,比如一场会议或一个洗衣周期)来说,这比精度更重要;对短间隔(做饭、运动组间)来说,声音闹铃是主力,通知只是锦上添花。
手机上为什么不好说
移动端浏览器对后台 Tab 的节流比桌面端狠得多,有些甚至会完全锁屏,这会让网页计时器暂停甚至直接死掉。当屏幕保持常亮、Tab 可见时,网页计时器在手机上表现很好;但要给口袋里的手机计时,它就是选错了工具。口袋场景下,原生应用或实体计时器更胜一筹。在依赖任何倒计时之前,先弄清自己处在哪种场景。
给你的计时器做一次测试
把任何一个新计时器设成1分钟,切走 Tab,然后等。如果闹铃在1分钟过后的几秒内响起,说明它扛得住节流,你可以信任它。如果它响晚了或者干脆没响,你用两分钟就学到了本该等到意面扑锅时才会学到的东西。我们的计时器在桌面浏览器上通过了这项测试,能从后台 Tab 里发出提醒——这正是我们做它的原因。
工具
我们的免费在线计时器基于墙钟时间构建,在桌面端能从后台 Tab 出声提醒。用上面那个1分钟的技巧测它一次,把音量开大,你就得到了一个表现得像电器、而不是像网页的倒计时。