场景:最近在做关于登录获取验证码倒计时发现,某些手机开启倒计时后切换到其他页面或者熄屏时倒计时会停止,这样会造成一个问题,后台接口判断短信验证码到有效期时60s,熄屏再回来到时候用户会误以为没有超过60s,导致验证码校验失效
解决思路:利用浏览器的visibilitychange属性,监听页面隐藏到时候,记录下当时到时间time1,等到页面在回来到时候记录下当前到时间time2,计算出当前页面隐藏的时间,倒计时再减去这个时间差,就是真正的倒计时。
因为大部分手机熄屏的时候倒计时都是正常进行的,只有少部分倒计时停止,怎么区分这两种情况呢,熄屏的时候记录下当前的倒计时秒数second存到一个变量closeSecond中,当页面再回来的时候把倒计时second跟closeSecond比较,倒计时没有变的就是熄屏倒计时停止的情况,需要对倒计时进行处理
let that = this
window.addEventListener('visibilitychange',() =>{
let {showSecond,second} = that.state
//只有展示倒计时才记录,倒计时未开始前不用处理
if (!showSecond) return
if (document.visibilityState =='hidden') {
//页面隐藏记录当前的时间跟倒计时的秒数
that.setState({
closeTime: Date.now(),
closeSecond:second
})
} else {
let {second,closeTime,closeSecond} = that.state
// 页面隐藏的倒计时秒数跟页面展开的秒数是一样的,证明在页面隐藏的时候倒计时停止了
if (closeSecond === second ) {
let times
times = second - parseInt((Date.now() - closeTime)/1000)
that.setState({
second: times
})
}
}
})
倒计时未开始前不必处理

倒计时开始后再处理

网友评论