ios锁屏或页面隐藏时，定时器setInterval倒计时不执行，解锁显示后才执行的问题

阳光穿透心脏的1/2处 2021-08-26 14:04 1257阅读 0赞

手机锁屏后，ios h5浏览器定时器暂停执行了，发送验证码的秒数或倒计时没有继续往下走，遇到这种问题可以用visibilitychange这种方式处理

![20200214104349195.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70][]

**addVisibilitychange();这个方法记得只在ios环境下执行，安卓不需要。网上找一下判断ios和安卓的方法。**

![202002121115509.png][]

![20200214104603778.png][]

// 监听页面隐藏（锁屏）或后台执行时，解决定时器不执行的问题
        addVisibilitychange(){
          let that = this;
          let start,end,vibS,newS;
          document.addEventListener('visibilitychange',function(){
            // hidden 为锁屏隐藏状态，visible为重新显示状态
            if(document.visibilityState === 'hidden'){
              start = new Date().getTime();
            } else if(document.visibilityState === 'visible'){
              end = new Date().getTime();
              // vibS为锁屏间隔的时间（秒），timer为定时器锁屏前显示的秒数
              vibS = Math.floor((parseInt(end) - parseInt(start))/1000)
              newS = parseInt(that.timer) - vibS
              if(newS >0){
                // 重新赋值，间隔后的新的定时器时间
                that.timer = newS
              } else {
                // 已经超出范围，则默认秒数已经读完，恢复原来时间、定时器，显示重发验证码文案
                that.timerShow = false;
                clearInterval(that.timeing)
                that.timeing = null
                that.timer = 120
              }
            }
          });
        },

定时器代码

getTimeCount(){
          if(!this.timeing){
            this.smsCode = ""; // 清空验证码
            this.timerShow = true;
            this.timeing = setInterval(()=>{
              this.timer--
              if(this.timer <0){
                this.timerShow = false;
                clearInterval(this.timeing)
                this.timeing = null
                this.timer = 120
              }
            },1000)
          }      
        },

[20200214104349195.png]: /images/20210813/4a571e42e86848188787cf552761b4d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70]: /images/20210813/f20f187050e340da80b4e1b2498afeeb.png
[202002121115509.png]: /images/20210813/12ba038d93fe4ead8d7743791453a287.png
[20200214104603778.png]: /images/20210813/bf1d54feadcf4924b02bb8d15c600a40.png