JS关于定时器setInterval不准问题，在移动端手机息屏时停止在pc上会变慢的问题

JS关于定时器setInterval不准问题，在移动端手机息屏时停止在pc上会变慢的问题

定时器不准的原因：

PC——大多数浏览器都会自动把未激活页面中的JS定时器（setTimeout、setInterval）间隔最小值改为1秒以上。这是因为间隔很小的定时器一般用来做UI更新（比如定时更新动画），但是在后台运行的定时器（用户看不见的页面）会变慢，这样既节省资源有不影响用户体验。
移动端（H5）——内存、CPU、带宽等资源更加宝贵，移动设备上的浏览器往往会直接冻结所有未激活页面上的所有定时器。

解决方法

思路：我们可以先记录刚开始倒计时的时间（this.startCountTime = Date.now()）
当手机息屏或在后台运行时（visibilitychange事件监听）清除定时器，当页面恢复可见状态时
实际倒计时时间 = 当前时间 - 开始倒计时的时间然后再用需要倒计时的时间减去实际倒计时时间的值大于0时继续倒计时这个差值，小于0就结束倒计时
注意添加了visibilitychange事件记得清除

代码（vue）：

data(){
	return:{
		defaultTime:5//倒计时时间（分钟）
	}
}
mounted(){
   document.addEventListener('visibilitychange',this.visibilitychange)
},
methods:{
        visibilitychange(){
            let vm = this
            if(document.hidden){
                console.log("手机息屏或离开该程序");
                clearInterval(vm.timeId)
            }else{
                console.log('恢复页面');
                let second2 =  Math.floor((Date.now() - vm.startCountTime) /1000)                  			  
                let surplusTime = vm.defaultTime*60 -  second2  
                if(surplusTime>0){
                    console.log('继续倒计时',surplusTime);
                    vm.startInterval(surplusTime)
                }else{
                    console.log('恢复页面倒计时结束');
                }
            }
        },
        // 开始倒计时(秒)
        startInterval(num){
            let vm = this
            vm.timeId = setInterval(() => {
                vm.time = num--
                    if(num < 0 ){
                        console.log('倒计时结束');
                        clearInterval(vm.timeId)
                        return
                    }
            }, 1000);
        },
}
beforeDestroy(){
        clearInterval(this.timeId)
        document.removeEventListener('visibilitychange',this.visibilitychange)

 },

这样就基本上解决定时器不准的问题了。
如果各位有更好的方法或者有bug也可以留言交流一下，互相学习！