我正在使用HTML、CSS和JavaScript编写一个浏览器游戏，使用Perl编写。健康和耐力保存在服务器上，我使用JavaScript在当前页面加载时向用户显示这些统计数据的实时更新计数。这个功能运行良好，但是如果用户切换标签或切换到其他应用程序并将浏览器留在后台运行，当您返回时看到的计数值无法正确跟上。所以当您切换回浏览器时，您的计数器可能显示50/100的耐力，而实际上您的耐力是100/100。因此，当您在游戏中执行某个操作（加载新页面）时，服务器会将计数器更新为真实的数值，因为JavaScript只是计时以向用户在浏览器中显示一个“实时”滚动视图。
有没有办法确保即使页面/标签不活动或不在前台，JavaScript计数器仍然可以正常工作？除了完全重写我的游戏以在浏览器中向用户显示连续的实时服务器推送内容之外？
假设您正在玩游戏。您会看到您的健康和耐力在恢复。您切换到另一个程序一分钟，然后返回到浏览器中的游戏。您会注意到您离开期间健康和耐力没有更新。但是当您在游戏中执行某个操作时，该值将更新为应有的数值，因为它在服务器上进行了内部跟踪。这就是我想要解决的问题。希望这样说得清楚！
除了在网上搜索并最终找到这个网站上没有一个真正“好”的答案之外，我还没有尝试过任何方法来解决这个问题，所以我决定提问。
连续的服务器推送也不起作用。主事件循环中的任何东西，如计时器或在失去焦点时发生的事件，都会被浏览器减慢以节省资源。一些移动浏览器会完全停止它。
问题的答案是改变应用程序如何跟踪这些统计数据。
现在有些人会说要使用WebWorkers在单独的线程中运行计时器，但这并不能解决所有问题。您仍然会遇到不同版本的问题，例如如果有人从睡眠中恢复您的网页或类似情况。没有后台任务能够幸存下来。
您提到您还在服务器上跟踪这些统计数据。这很方便，因此您应该做的最明显的事情是使用窗口焦点事件检测标签何时重新获得焦点。然后，您将调用服务器以获取最新的统计数据并根据该新数据重置计时器。为了在请求正在进行时防止显示陈旧的数据，您可以选择在此期间显示加载旋转器或其他内容。
修复此问题的另一种常见方法是在每次计时器增加时保留一个变量，该变量表示数据上次返回的时间戳。当您失去焦点时，您可以使用
blur事件检测到，并将该最后时间戳存储在某个地方。然后当它们重新获得焦点时，您可以处理focus事件，并计算当前时间与离开焦点（失去焦点）之前记录的最后时间之间的差异。您可以从此期间重新计算出应该是什么值。但是如果您的服务器具有此信息，只需在重新获得焦点时向服务器询问会更不容易出错和简单。