浏览器切换页面或者缩小页面造成定时器延缓或者停止的问题

使用html5的Page Visibility API来实现控制，由于浏览器本身切换页面或者缩小带来的定时器延缓，理论上是直接停止，但是实测发现只是延缓，这导致

我们不仅需要控制定时器的开启，还需要控制关闭的时间。

页面缩小或者切换其他窗口下hidden为true，清空定时器，否则开启canvas，由于浏览器一开始虽然为false但是仍然不会

执行false下的canvas动画，需要先开启执行并且制定this访问methods下的方法，当然这种方法其实还有一种小问题，隐藏页面或者切换标题页的时候回来当前页面会重新开始计算，并不会沿着之前的动画接下去。

在vue生命周期mounted()中执行

const _this = this

_this.getTime()

//使用html5的Page Visibility API来实现控制，由于浏览器本身切换页面或者缩小带来的定时器延缓，理论上是直接停止，但是实测发现只是延缓，这导致

//我们在不仅需要控制定时器的开启，还需要控制关闭的时间。

//页面缩小或者切换其他窗口下hidden为true，清空定时器，否则开启canvas，由于浏览器一开始虽然为false但是仍然不会

//执行false下的canvas动画，需要先开启执行并且制定this访问methods下的方法

document.addEventListener('visibilitychange', function() {

    _this.isHidden = document.hidden

    if(_this.isHidden === false){

        _this.getTime()

    }else {

        clearInterval(_this.timer)

        clearInterval(_this.timer2)

    }

})

methods下定义执行canvas动画的方法

getTime(){

    //制作根据容器宽度随机生成canvas图片移动泡泡

    let oc = document.querySelector('.cav')

    let cxt = oc.getContext('2d')

    let arr = []

    let img1 = new Image()

    img1.src = '/static/Finshing/paopao01.png'

    let img2 = new Image()

    img2.src = '/static/Finshing/paopao02.png' let

    img3 = new Image()

    img3.src = '/static/Finshing/paopao03.png'

    this.timer = setInterval(function(){

        let x = Math.random()*oc.width

        let y = oc.height - 20

        let r = Math.random()

        let deg = 0

        let step = Math.random()*20 + 10

        let startX = x

        let startY = y

        let flog = Math.random()*3

        let opacity = Math.random() arr.push({

            x:x,

            y:y,

            r:r,

            deg:deg,

            step:step,

            startX:startX,

            startY:startY,

            opacity:opacity,

            flog:flog

        })

},1000)

this.timer2 = setInterval(function(){

    cxt.clearRect(0,0,oc.width,oc.height)

    for(let i = 0;i < arr.length;i++){

        arr[i].deg += 5

        arr[i].x = arr[i].startX + (Math.sin(arr[i].deg*Math.PI/180))*arr[i].step

        arr[i].y = arr[i].startY - (arr[i].deg*Math.PI/180)*arr[i].step

        if(arr[i].y < 20){

        arr.splice(i,1)

        }

    }

    for(let i = 0;i < arr.length;i++){

        cxt.beginPath()

        if(arr[i].flog < 1){

            cxt.drawImage(img1, arr[i].x, arr[i].y)

        }else if(arr[i].flog >= 2 ){

            cxt.drawImage(img2, arr[i].x, arr[i].y)

        }else{

        cxt.drawImage(img3, arr[i].x, arr[i].y)

        } cxt.stroke()

    }    

},1000/60) }