js倒计时在应用后台不执行

发表于 | Edited on | 分类于 | Comments： | Views：
解决js倒计时在应用后台/锁屏时出现时间暂停不准问题。

方法1：HTML<meta>标签

1
2
3
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0">
  • 在meta里进行设置，设置页面nocache，每次访问次页面，均需要从服务器重新获取，而不是使用缓存中读取,
  • expires设定过期时间，一旦过期就必须请求服务器，
  • expries出现在http-equiv属性中，使用content属性表示页面缓存的过期时间
  • expries=0，缓存过期前的分钟数。若用户在页面过期前返回该页面，就会显示缓存的版本页　　　

方法2：visibilitychange事件【推荐】

1
2
3
4
5
document.addEventListener('visibilitychange', () => {
    if(!document.hidden){
        //如果重新打开应用视图 更新倒计时
    }
})
  • visibilitychange事件监听用户离开/回来行为