移动端页面倒计时在浏览器后台运行时的bug及解决办法_vue写了个倒计时,浏览器最小化后,倒计时有时候会暂停

通常我们在做移动端项目的时候会遇到发送验证码之后，手机熄屏再点亮观察到倒计时还停留在熄屏那一刻。以下内容就是为了解决该问题。

##首先我们要明白产生该问题的原因是因为熄屏后浏览器终止了js的执行造成的。
##解决思路
1.首先考虑我们发现visibilitychange能监听到手机熄屏点亮
2.计算熄屏的时间差
3.将计算的时间差减掉，来获取正常屏幕显示的时间
4.设置新的定时器来计算倒计时

##来看具体代码（以vue项目举例）

html部分
<van-button size="small" type="default" :disabled="btnDis" @click="verification">{{btnName}}</van-button>
1
2

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
                     }
                }
            });
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

至于为什么要设置新的定时器是因为ios系统中，熄屏后js阻断后 按钮点击的定时器并不会继续读秒。