移动端倒计时不准：手机锁屏熄屏/APP后台运行/屏幕卡顿

2024-05-16 12:28| 来源: 网络整理| 查看: 265

息屏导致 js 定时器时间不准问

根据后端返回的当前服务器时间做一个倒计时，用settimeout 替换 setInterval ，刷新页面时间

【 PC 上的 Firefox、Chrome 和 Safari 等浏览器，都会自动把未激活页面中的 JavaScript 定时器（setTimeout、setInterval）间隔最小值改为 1 秒以上。这是因为间隔很小的定时器一般用来做 UI 更新（例如用定时器实现的动画），让用户不可见的页面上的定时器跑慢一些，既节省资源又不会影响体验。对移动浏览器来说，内存、CPU、带宽等资源更加宝贵，移动设备上的浏览器往往会直接冻结所有未激活页面上的所有定时器。】

浏览器可以监听页面是否为可见激活状态

document.addEventListener("visibilitychange", ()=>{ if(document.visibilityState==="visible"){ //TODO } });

这个在PC上面有效，APP端，可以通过原生，监听当前Active webview 为激活状态，通知移动端。前端调用SDK接口即可。

页面卡顿造成时间不准

回顾《弄懂javascript的执行机制:事件轮询|微任务和宏任》与《浏览器层面优化前端性能(1):Chrom组件与进程/线程模型分析》，可以猜出因为JavaScript 事件机制造成的延误。看看：hcysun.me/2016/07/11/js-Worker-API-在倒计时中的使用/ 的案列

在做开发的时候，倒计时的需求是很常见的，比如订单待提交和待支付都会有倒计时，市面上的兼职软件在领取任务后都会有倒计时，登录注册中获取验证码的时候也会有倒计时，有的页面只有一个倒计时，而有的页面作为列表页，列表中的每一项都会有倒计时，今天就来聊聊 Worker API 在js倒计时中的使用，以及为什么要使用 Worker 来做倒计时

setInterval 或 setTimeout 的问题

当提到js的倒计时功能时，我想你第一个想到的可能就是 setInterval 这个东东，这个东西在做PC页面的时候并没有什么问题，至少我现在还没遇到什么问题，而当你在移动页面中使用它来做倒计时的时候，就会出问题了，具体来说，是在做ios中的移动页面开发的时候，问题就尤为明显了，我们有以下代码：

60 var box = document.getElementById('box'); var num = 60; var T = setInterval(function () { box.innerHTML = --num; if (num

【本文地址】

公司简介

联系我们