秒杀倒计时问题记录及处理方案

PrendsMoi Vue
  • 后台挂起倒计时停止问题 自定义一个setTimeout来记录时间的走动，当时间跨度不正确时，调整倒计时时间
// 执行次数
let count = 0
// 本地时间
const localStart = new Date().getTime()
// 计时间隔
const interval = 1000
// 上一次时间
let lastTime = 0
// 计时器
let timeScreen = ''
function isLockScreen() {
  count++
  const nowTime = new Date().getTime()
  // 偏差
  const offset = nowTime - (localStart + count * interval)
  // 判断是否锁屏阻塞
  if(lastTime !== 0 ) {
    if((nowTime - lastTime) > (offset + 1200) || nowTime < lastTime) {
      lastTime = 0
      // 重新调用
      this.init()
      return false
    }
  }
  lastTime = nowTime - offset
  let nextTime = interval - offset
  if(nextTime < 0){
    nextTime = 0
  }
  timeScreen = setTimeout(this.isLockScreen, nextTime)
}
  • App内切换webView页面刷新问题 其实这个并不算倒计时的问题，但是在这个项目中遇到也就记录一下吧！说到这个问题真的很揪心，因为当时遇到这个问题，发现这是因为调用App的原生事件去打开新的WebView页面，导致当前H5的href并没有变更。想到的第一个处理方案是希望App端能否提供一个事件监听供我回调，但是App之前没有这个开发需求，项目又急着上线，所以只能放弃。之后想到新的WebView是否会阻塞旧的webView的js，尝试过后发现并不会！然后开始去Google搜索，发现一个visibilitychange的监听事件和document.hidden的属性，尝试使用后，方案可行。
document.addEventListener('visibilitychange', () => {
  if(!document.hidden){
    this.init()
	}
}, false)

事件和属性的Api链接

comments powered by Disqus