手机锁屏js倒计时停止问题解决办法探索
如图,有这么个需求,测试人员在测试过程中提了一个bug,手机锁屏再唤醒倒计时时间没有更新,仍从锁屏的时间继续,于是开始寻找解决之法
经了解得知,锁屏时候,浏览器的一切活动会停止运行,那么js也无法幸免,这时候就想到有没有能监听浏览器活动停止的方法呢?一查,果然有
具体可参看https://www.css88.com/archives/6103,
重要的就是给window加一个visibilitychange监听,在里面判断document.tVisibilityState的值,如果为hidden,则是页面内容不可见时的钩子,如果不是hidden,则就是可见时的钩子,即唤醒页面或切换应用回到页面的回调。
vue里面使用方法可以参考以下代码
data:() =>{
return {
times:'',
closeTime:''
}
}
mounted() {
window.addEventListener('visibilitychange',this.diffTime)
},
beforeDestroy(){
window.removeEventListener('visibilitychange', this.diffTime)
},
methods: {
// 处理锁屏时间差
diffTime() {
if (document.tVisibilityState =='hidden') {
this.closeTime = Date.now()
} else {
this.times = this.times - (Date.now() - this.closeTime)/1000;
}
},
}
经实验,加上这段代码后确实倒计时更新了,但是时间显示会快2到3秒,不得其解,感觉应该是取值的时候比屏幕唤醒慢了,比如我锁屏5秒,但是在唤醒时倒计时少了7秒。
也想到了一种办法,就是唤醒时候重新拉取服务端的时间,然后更新虚拟dom,在实际操作中,由于是异步获取,会看到倒计时数字那里有明显的闪一下更新,不利于用户体验。
所以最终还是采用了visibilitychange事件来处理,毕竟用户在这个页面不会停留太久,不过这并没有完美的解决问题,如果你有更好的方法,希望能告诉我。
手机锁屏js倒计时停止问题解决办法探索的更多相关文章
- html5在手机熄屏后倒计时会出现延迟情况
今天开发了一个手机端的倒计时,然后同事说出现了Bug,怎么回事呢?Bug很简单,就是在手机返回主界面或者熄屏后倒计时会暂停在熄屏前的时间(注意时间是页面加载时获取的服务器的时间),问题很简单,知道问题 ...
- 自选项目--手机锁屏软件--NABC分析
N(Need 需求) 关键字:利用碎片时间加强对想记的事物的记忆.备忘.一般来说,锁屏目的大致有三点: 1.保护手机隐私 2.防止误操作手机 3.在不关闭系统软件的情况下节省电量 对于市面上已有的锁屏 ...
- 360wifi: 手机锁屏360wifi掉线的解决方法
如遇到iphone锁屏断网的情况,按照以下操作步骤可以解决一部分用户的问题 (该问题并不是360WifFi问题,与苹果机制有关)如有安卓手机掉线,请确保手机连接其他Wifi并不会掉线,然后尝试粉色字体 ...
- Android 监听手机锁屏的工具类
自定义 ScreenListener package com.example.teagardenhd.Listener; import android.content.BroadcastReceive ...
- 【填坑往事】Android手机锁屏人脸解锁优化过程实录
背景 写这篇文章,主要是为了以后面试方便.因为我简历上写了,上一份工作的最大亮点是将人脸解锁的速度由1200ms优化到了600ms,所以这些内容已经回答无数遍了.但每次总觉得回答的不完整,或者说总感觉 ...
- iOS开发之应用内检测手机锁屏,解锁状态
iPhone的锁屏监测分为两种方式监听: 1. 程序在前台,这种比较简单.直接使用Darwin层的通知就可以了: #import <notify.h> #define Notificati ...
- Eclipse js报错问题解决办法
最近在Eclipse中导入新项目后会发现js报错,但是不影响程序的运行,但是对于程序员的我们来说多少还是比较在意代码前面的红色的X的,有木有??? 上网也查了很多方法,对于其中一种方法表示不能完全解决 ...
- js倒计时 手机休眠时 时间不进行减少
http://www.111cn.net/wy/js-ajax/94218.htm 手机版网页js倒计时存在的问题与解决的方法 www.111cn.net 更新:2015-09-16 编辑:kp123 ...
- WP 手机Lumia 820 锁屏密码的破解研究
Windows Phone lumia 手机锁屏密码的破解研究 大家好今天给大家分享一个最新研究案例, 近日笔者接Nokia Lumia 820, 由于客户密码失误太多,导致锁屏23000余分 ...
随机推荐
- 在vue中使用animate.css
animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: i ...
- 哪些window你不知道的却实用的小技巧----window小技巧
前言 一直想要整理一篇有关于window比较全的使用小技巧,却又不知道从哪里开始写起.而让我准备动手写这边随笔的动力,还是在加入虫部落<一个绿色环保,充满朝气的好地方>,从大家的分享中,我 ...
- Dubbo 的应用
--- 用于大规模服务化,通过在消费方获取服务提供方的地址列表,实现负载均衡,减轻服务器压力. 最简单调用图 节点角色说明: l Provider: 暴露服务的服务提供方. l Consumer ...
- 周末发福利了!26个免费的HTML5模版
本期文章我们为大家搜集了很多专业且高质量的HTML5模版,而且还是免费的呦.如果你对编码很熟悉,那么从这些网站里你可以学到很多新技能.来这些国际范的案例中挑选您喜欢的模版学习起来吧:) Zeences ...
- 如何关闭sublime更新提示
前提:sublime已激活
- javaScript语法和风格的检查工具
一.JSLint. JSHint. JSCS. ESLint 1.JSLint是由Douglas Crockford开发的,可能是最早的JavaScript Lint工具.JSLint定义了一组编码约 ...
- c语言学习笔记.内存管理.
内存: 每个程序的内存是分区的:堆区.栈区.静态区.代码区. 1.代码区:放置所有的可执行代码,包括main函数. 2.静态区:存放所有的全局变量和静态变量. 3.栈区:栈(stack),先进后出.存 ...
- Angular 2.0 基础:服务
什么是服务(Service) 在Angular 2 中我们提到的服务 service 一般指的是 哪些能够被其他组件或者指令调用的 单一的,可共享的 代码块.当然,通过服务可以将数据和组件分开,这样就 ...
- oracle链接指定实例
sqlplus /@ORACLE_SID as sysdba; 其中ORACLE_SID为具体的实例名称, 比如连接到orcl实例就执行命令: sqlplus /@orcl as sysdba; se ...
- PEB及LDR链
PEB地址的取得在NT内核系统中fs寄存器指向TEB结构,TEB+0x30处指向PEB结构,PEB+0x0c处指向PEB_LDR_DATA结构,PEB_LDR_DATA+0x1c处存放一些指向动态链接 ...