浏览器失焦时如何让网页JavaScript计数器实时更新？

不需要重构为持续服务器推送模式，有两种轻量方案可以解决这个问题：

方案1：页面激活时主动拉取服务器真实值 #

利用浏览器的页面可见性API监听标签从后台返回前台的事件，触发时直接请求Perl后端获取最新的生命值和耐力值，覆盖本地显示。

代码示例 #

document.addEventListener('visibilitychange', function() {
  // 当页面从后台回到前台时
  if (!document.hidden) {
    // 调用你的Perl后端接口获取最新属性
    fetch('/player/stats') // 替换为实际接口路径
      .then(res => res.json())
      .then(data => {
        // 更新页面显示
        document.getElementById('health-display').textContent = `${data.health}/100`;
        document.getElementById('stamina-display').textContent = `${data.stamina}/100`;
      });
  }
});

优势 #

• 逻辑简单，完全依赖服务器权威值，不会出现计算误差
• 无需修改现有后端逻辑，只需新增一个轻量的属性查询接口

方案2：记录离线时长，本地预计算后再同步 #

如果希望用户回到页面时立即看到更新效果，可以先记录页面进入后台的时间戳，回到前台时计算离线时长，根据预设的恢复规则（比如每秒恢复1点耐力）预更新本地显示，再请求服务器值修正误差。

代码示例 #

let backgroundEnterTime;

document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    // 页面进入后台时记录时间
    backgroundEnterTime = Date.now();
  } else {
    if (backgroundEnterTime) {
      // 计算离线时长（秒）
      const offlineSeconds = (Date.now() - backgroundEnterTime) / 1000;
      // 假设耐力每秒恢复1点，且上限为100
      const staminaRecovery = Math.min(Math.floor(offlineSeconds * 1), 100 - currentStamina);
      
      // 先更新本地显示
      currentStamina += staminaRecovery;
      document.getElementById('stamina-display').textContent = `${currentStamina}/100`;
      
      // 再请求服务器真实值修正
      fetch('/player/stats')
        .then(res => res.json())
        .then(data => {
          currentStamina = data.stamina;
          document.getElementById('stamina-display').textContent = `${data.stamina}/100`;
        });
      
      backgroundEnterTime = null;
    }
  }
});

注意事项 #

• 不要依赖setInterval/setTimeout在后台运行，浏览器会大幅减慢甚至暂停后台定时器，导致时间计算失效
• 本地预计算仅用于优化用户体验，最终数值必须以服务器返回值为准，避免客户端篡改或规则不一致导致的误差

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