背景:

用戶最小化瀏覽器窗口, 再次進入, 頁面數(shù)據(jù)不更新的問題

例子:

頁面有活動倒計時, 當用戶新開 tab 或者將瀏覽器最小化, 倒計時方法會暫停, 當用戶再次進入到活動頁面, 如果不刷新頁面, 或者不重新請求接口, 倒計時會有偏差

解決方法:

/** 
  * @param {function} funcShow  // 頁面顯示 調(diào)用的方法 
  * @param {function} funcHide   // 頁面隱藏 調(diào)用的方法
  */
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') {
      // 頁面顯示 調(diào)用的方法
      typeof funcShow === 'function' && funcShow()
    } else {
      // 頁面隱藏 調(diào)用的方法
      typeof funcHide === 'function' && funcHide()
    }
  }, false)
}

// 頁面初始化的時候 調(diào)用方法 [ 此處以 vue 舉例 ]
import {changePageStatus} from '@/changePageStatus方法所在的文件.js'
...
methods: {
  pagesShow() {
    console.log('頁面顯示了')
  },
  pagesHide() {
    console.log('頁面隱藏了')
  },
},
mounted() {
 changePageStatus({
    funcShow: () => this.pagesShow(),
    funcHide: () => this.pagesHide()
  })
}
...