服装商城网站的设计与实现,专门做眼镜的国外网站,在线制作名片模板,临沂做网站优化目录 1#xff0c;问题 - 计时器失效2#xff0c;解决 - 页面可见性判断1#xff0c;页面可见性2#xff0c;visibilitychange3#xff0c;终极解决方案 - lifecycle 3#xff0c;精准计时 1#xff0c;问题 - 计时器失效
问题复现#xff1a;移动端必现#xff0c;p… 目录 1问题 - 计时器失效2解决 - 页面可见性判断1页面可见性2visibilitychange3终极解决方案 - lifecycle 3精准计时 1问题 - 计时器失效
问题复现移动端必现pc 端和浏览器版本有关公司电脑必现家里的没有复现。
通过 setTimeout 或 setInterval 实现的倒计时会在页面隐藏后实测会延缓计时或经过15s 左右会停止计时导致计时不准确直到页面再次激活。
2解决 - 页面可见性判断
可以通过判断页面可见性计算出经过的隐藏时间来重置倒计时的时间点。
1页面可见性
无论使用 pc 还是移动端都会有当前页面被隐藏的情况
切换 tab 页浏览器最小化切换到其他应用点击链接跳转到其他页面
2visibilitychange
MDN 参考
document.addEventListener(visibilitychange, () {// 页面可见if (document.visibilityState visible) {console.log(visible);} else {console.log(hidden);}
});举例计算隐藏时间
bodydiv idbox100/divscriptconst box document.getElementById(box);// 初始时间let count 100;const inerval setInterval(() {if (count 0) {box.innerHTML 倒计时结束;clearInterval(inerval);document.removeEventListener(visibilitychange, visibilitychange);return;}box.innerHTML count--;}, 1000);let startTime2Hidden 0; // 页面隐藏瞬间的时间let count2Hidden 0; // 记录页面隐藏瞬间的 count 值document.addEventListener(visibilitychange, visibilitychange);function visibilitychange() {if (document.visibilityState visible) {const minus parseInt((new Date().getTime() - startTime2Hidden) / 1000);count count2Hidden - minus; // 正确经过的时间} else {startTime2Hidden new Date().getTime();count2Hidden count;}}/scriptvisibilitychange 的问题在 safari 浏览器下这个事件不总是触发比较怪异。
3终极解决方案 - lifecycle
谷歌实验室开源项目兼容性很好。
使用举例
script src./lifecycle.es5.js/script
scriptlifecycle.addEventListener(statechange, function (event) {console.log(event.oldState, event.newState);if (event.oldState passive event.newState hidden) {console.log(hidden);} else if (event.oldState hidden event.newState passive) {console.log(visibile);}});
/script3精准计时
无论使用哪种解决方案倒计时都不是准确的因为用户可能会修改本地时间况且 js 计时本身就不精准。
要实现精准计时还得靠后端接口返回正确的时间后端也会做校验。
以上面这个问题来说另一种解决方案在页面激活时再次请求一次倒计时相关的接口前端重置倒计时时间点。 以上。
