js 监听浏览器页面显示隐藏的状态

背景:

用户最小化浏览器窗口, 再次进入, 页面数据不更新的问题

例子:

页面有活动倒计时, 当用户新开 tab 或者将浏览器最小化, 倒计时方法会暂停, 当用户再次进入到活动页面, 如果不刷新页面, 或者不重新请求接口, 倒计时会有偏差

解决方法:

/** 
  * @param {function} funcShow  // 页面显示 调用的方法 
  * @param {function} funcHide   // 页面隐藏 调用的方法
  */
function changePageStatus ({funcShow=null, funcHide=null}) {
  let hidden, state, visibilityChange;
  if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
    state = "visibilityState";
  } else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
    state = "mozVisibilityState";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
    state = "msVisibilityState";
  } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
    state = "webkitVisibilityState";
  }

  document.addEventListener(visibilityChange, () => {
    if (document[state] === 'visible') {
      // 页面显示 调用的方法
      typeof funcShow === 'function' && funcShow()
    } else {
      // 页面隐藏 调用的方法
      typeof funcHide === 'function' && funcHide()
    }
  }, false)
}

// 页面初始化的时候 调用方法 [ 此处以 vue 举例 ]
import {changePageStatus} from '@/changePageStatus方法所在的文件.js'
...
methods: {
  pagesShow() {
    console.log('页面显示了')
  },
  pagesHide() {
    console.log('页面隐藏了')
  },
},
mounted() {
 changePageStatus({
    funcShow: () => this.pagesShow(),
    funcHide: () => this.pagesHide()
  })
}
...