解决手机熄屏问题更简洁的方法

上篇利用visibilitychange解决手机熄屏问题,visibilitychange有兼容性问题,部分ios浏览器不支持visibilitychange
现在可以换一种思路,之前的倒计时的计算是在定时器内减一

let second = 60
second = second - 1

现在倒计时是60减去当前的系统时间跟短信发送成功的时间差,这个是根据实时时间计算的,即使熄屏倒计时停止,屏幕再切回来的时候,重新计算的是当前的时间跟短信发送的时间差,倒计时也不会变慢

        let res = await get('/sendMessage', {userName,token,constId})
        if(res && res.data && res.data.code === '0000') { 
            let msgTime = Date.now() //记录短信发送的时间
            // 展示倒计时
            this.setState({
                showSecond: true
            })
            timer = setInterval(() => {
                let {second} = this.state
                if (second > 0) {
                    // 精华:解决熄屏回来后时间不准
                    second = 60 - parseInt((Date.now() - msgTime)/1000)
                    this.setState({
                        second
                    })
                } else {
                    clearInterval(timer)
                    slider.reload()
                    this.setState({
                        showSecond: false,
                        second: 60,
                        fobidClick: false
                    })
                }
            }, 1000);
        } else {
            slider.reload()
        }

你可能感兴趣的:(解决手机熄屏问题更简洁的方法)