当页面失去焦点的时候定时器的处理

当页面失去焦点时（包括最小化页面，没有关当前页面就切换到其他页面），页面处于静止状态，这与浏览器的渲染机制有关，但定时器setinterval是除外的,页面失去焦点，setinterval会按照既定的程序继续执行，但DOM却处于静止状态。

那么问题来了，当页面重新获取焦点的时候，之前积攒的setinterval程序会一股脑的渲染的DOM上，会造成setinterval与DOM不同步的情况出现，因此，在页面失去焦点清除定时器是很有必要的。

• 如何获取页面有没有焦点呢？ 可以给document注册visibilitychange焦点事件 eg（例如）： document.addEventListener('visibilitychange', fn)，意思是：当页面失去焦点时会执行fn函数，我们可以在fn中清楚setinterval。 visibilitychange事件有三种状态，prerender（常态），visible（获取焦点） 和 hidden（失去焦点） 想要查看状态可以用document.visibilityStage查看。

eg：

document.addEventlistener('visibilitychange',function(){
    if(document.visibilityStage == 'hidden'){
      concle.log('清楚定时器，失去焦点')
    })
    if(document.visibilityStage == 'hidden'){
    concle.log('获取焦点')
    }
 }) 

也可以直接用hidden做判断，hidden有两个值true和false

eg：

document.addEventlistener('vusibilitychange',function(){
   if(document.hideen){
    concle.log('hideen值为true，表示离开')
  }else{
  concle.log('hideen值为false表示获取焦点')
})

定时器setinterval在页面离开清除，在获取焦点时重新执行即可，最重要的就是保持页面的setinterval与DOM同步