通常我们在做移动端项目的时候会遇到发送验证码之后,手机熄屏再点亮观察到倒计时还停留在熄屏那一刻。以下内容就是为了解决该问题。
##首先我们要明白产生该问题的原因是因为熄屏后浏览器终止了js的执行造成的。
##解决思路
1.首先考虑我们发现visibilitychange能监听到手机熄屏点亮
2.计算熄屏的时间差
3.将计算的时间差减掉,来获取正常屏幕显示的时间
4.设置新的定时器来计算倒计时
##来看具体代码(以vue项目举例)
html部分
<van-button size="small" type="default" :disabled="btnDis" @click="verification">{{btnName}}</van-button>
js部分
data() {
return {
btnName:'',
btnDis: false,// 按钮是否可点
text: 60, //设置倒计时总长
t1:'',
t2: '',
times: '',
times1: ''
}
},
methods: {
verification() {
if(!this.btnDis){
this.btnDis = true
this.text = 60
this.times = setInterval(()=>{
if (this.text > 1) {
this.text = this.text - 1
this.btnName = ''
this.btnName = this.text + '秒后重新发送'
} else {
this.btnName = '重新发送验证码'
this.btnDis = false
clearInterval(this.times)
}
},1000)
}
},
}
mounted() {
// 针对验证码手机熄屏后倒计时问题处理
document.addEventListener("visibilitychange", () => {
if(document.hidden) {
this.t1 = parseInt(new Date().getTime()/1000) //记录熄屏时刻时间
if (this.times1) {
clearInterval(this.times1) //如果存在熄屏后设置的定时器则清除
}
} else {
this.t2 = parseInt(new Date().getTime()/1000) //记录点亮屏幕时间
if (this.t2-this.t1 <= this.text) { // 判断熄屏和点亮之间的时长是否小于等于熄屏前test时间
this.text = this.text - (this.t2-this.t1)// 计算出我们想要的正确时间
clearInterval(this.times) // 清除按钮中的定时器
this.times1 = setInterval(()=>{ // 设置新的定时器
if (this.text > 1) {
this.text = this.text - 1
this.btnName = ''
this.btnName = this.text + '秒后重新发送'
} else {
this.btnName = '重新发送验证码'
this.btnDis = false
clearInterval(this.times1)
}
},1000)
} else {
this.btnName = '重新发送验证码'
this.btnDis = false
}
}
});
},
至于为什么要设置新的定时器是因为ios系统中,熄屏后js阻断后 按钮点击的定时器并不会继续读秒。