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
13
private componentDidmount () {
  // 第一次进入页面初始化
  this.initTiktok()
  document.addEventListener('visibilitychange', function () {
    console.log(document.visibilityState);
    // 清除定时器再重新初始化定时器
    this.initTiktok()
  }}

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

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

✏️ 如有问题,欢迎指正
上一篇 : DOM & BOM下一篇 : javascript异步编程