h5的后台切换到前台的数据更新

背景

今天遇到了一个需求,严格来说应该是一个bug,因为页面是一个倒计时,倒计时结束之后页面会进入正在直播的状态,但是有人反馈在锁屏一段时间之后,实际显示的倒计时时长有问题,实际上就相当于从锁屏时候继续执行倒计时,到导致实际数据与显示数据会有误差(以及开始直播了,页面还在倒计时的状态)

技术分析

ios的后台下js的代码执行会被挂起,这个是由于ios系统的后台机制决定的,从前台切到后台的时候,app会被挂起假死状态,代码也不会被继续执行,对于网页来说js的代码是无法继续执行的,所以需要找到从后台切换到前台的触发条件,再执行重新初始化的操作

visibilitychange

visibilitychange是一个网页可见不可见的触发机制,pc端主要是浏览器标签页tab切换的触发条件,假如用户在A页面添加该事件

1
2
3
4
// A
document.addEventListener('visibilitychange', function () {
  document.title = document.hidden ? "你切到其他页面了" : "终于来了你"
})

用户切到其他页面的时候visibilitychange事件触发,显示对应文案,切到A页面也会执行该事件绑定的方法

移动端上也跑了以下发现该事件可以被触发(IOS下) 触发条件:微信在打开网页且未关闭的时候

  • 微信网页打开,手机锁屏再解锁,执行该事件
  • 按HOME键返回桌面,点击进入微信,执行该事件、
  • APP之间的切换,切回微信的时候,执行该事件

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
private componentDidmount () {
  // 第一次进入页面初始化
  this.initTiktok()
  document.addEventListener('visibilitychange', function () {
    // 清除定时器再重新初始化定时器
    this.initTiktok()
  }}

private initTiktok () {
  // ****
}

此时再继续看倒计时流程的时候,后台切换到前台之后会重新获取数据之后重新初始化倒计时,这时候时间就可以实时对应的上了

上一篇 : javascript异步编程下一篇 : DOM & BOM