解决手机熄屏倒计时停止的问题

场景：最近在做关于登录获取验证码倒计时发现，某些手机开启倒计时后切换到其他页面或者熄屏时倒计时会停止，这样会造成一个问题，后台接口判断短信验证码到有效期时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
                    })
                }
            }
        })

倒计时未开始前不必处理

WechatIMG892.jpeg

倒计时开始后再处理

WechatIMG893.jpeg