jQuery实现移动端锁屏状态下页面5秒定时自动刷新/重载方法

核心逻辑基于浏览器Page Visibility API实现，针对移动端锁屏后JS被系统挂起的特性做了兼容，不需要额外引入其他依赖，直接在原有jQuery项目中加入以下代码即可：

实现说明 #

• 移动端设备锁屏时，浏览器会将页面标记为不可见状态，此时系统会挂起/节流页面内的JS定时器，直接在后台运行5秒倒计时的写法会完全失效，因此采用「记录隐藏起始时间+恢复可见时计算时间差」的通用兼容方案
• 当用户锁屏时长达到或超过5秒，解锁回到页面的瞬间会自动触发刷新，和需求预期效果一致
• 做了全浏览器兼容，不支持Page Visibility API的老旧设备会自动降级为窗口失焦/聚焦事件监听
• 刷新默认强制跳过浏览器缓存，保证拉取到最新的页面内容

完整代码 #

$(function() {
  // 记录页面进入隐藏状态的时间戳
  let lockStartTime = 0;
  // 适配不同浏览器内核的可见性API前缀
  let hiddenKey = 'hidden';
  let visibilityEvent = 'visibilitychange';
  if (typeof document.hidden === 'undefined') {
    if (typeof document.webkitHidden !== 'undefined') {
      hiddenKey = 'webkitHidden';
      visibilityEvent = 'webkitvisibilitychange';
    } else if (typeof document.mozHidden !== 'undefined') {
      hiddenKey = 'mozHidden';
      visibilityEvent = 'mozvisibilitychange';
    } else {
      // 不支持可见性API的环境，降级用窗口焦点事件
      $(window).on('blur', () => {
        lockStartTime = Date.now();
      }).on('focus', () => {
        if (lockStartTime && Date.now() - lockStartTime >= 5000) {
          location.reload(true);
        }
        lockStartTime = 0;
      });
      return;
    }
  }

  // 绑定可见性变更事件
  document.addEventListener(visibilityEvent, () => {
    if (document[hiddenKey]) {
      // 页面隐藏（锁屏/切到后台），记录起始时间
      lockStartTime = Date.now();
    } else {
      // 页面恢复可见，计算隐藏时长
      if (lockStartTime && Date.now() - lockStartTime >= 5000) {
        // 锁屏时长≥5秒，强制刷新（传true跳过缓存）
        location.reload(true);
      }
      lockStartTime = 0;
    }
  });
});

注意事项 #

• 目前移动端所有主流浏览器（iOS Safari、安卓Chrome、内置Webview）都有后台JS执行限制，无法实现在锁屏状态下、用户未解锁时精准在5秒节点执行刷新，这是系统级的省电策略，前端没有权限绕过
• 如果不需要强制跳过缓存刷新，可以把location.reload(true)里的参数去掉，改为location.reload()即可
• 不要尝试在页面隐藏时启动setTimeout做5秒倒计时，锁屏状态下定时器会被暂停，计时完全不准，无法达到预期效果

内容的提问来源于stack exchange，提问作者ezi