浏览器中的非活动选项卡时 CSS 不更新？答案

【问题标题】：CSS not updating while not active tab in browser?浏览器中的非活动选项卡时 CSS 不更新？
【发布时间】：2015-09-16 14:24:07
【问题描述】：

我在游戏中使用进度条作为计时器，我将其设置为在 15 秒左右的时间内从 100% 变为 0%。但是，在测试过程中，因为我有两个打开的两个选项卡来模拟两个客户端，所以我注意到只有在第一次激活该选项卡时，进度条才会在每个选项卡中开始动画。

现在这可能在实际游戏中不会成为问题，因为所有客户端在玩游戏时显然都会被标记，但情况可能并非总是如此，因为有些人会切换到不同的玩游戏时的标签，我不希望他们的计时器不同步。具体来说，如果我这样做：

$("#progressTimer").css({ 'transition-duration' : "15s" });
$("#progressTimer").css("width", "0%");

这会将其设置为在 15 秒内从当前百分比 (100%) 消耗到 0%，但直到用户第一次按标签查看它（并且如果用户再次按标签退出）后才会生效它同样会冻结，因为当你重新进入时，你可以看到它立即跳动。）因此，如果有人立即进入并且另一个人等待 5 秒才能看到它，那么第二个人的计时器将落后 5 秒。

这很可能是出于性能原因，因为不需要为这样的东西制作动画，这是看不到的，但考虑到我的应用程序不是很密集，并且会有这个进度条，我希望它始终是运行，即使用户没有被选项卡进入。有没有办法禁用这个可能的浏览器功能？

【问题讨论】：

标签： jquery html css twitter-bootstrap tabs

【解决方案1】：

如果这是一个重要的计时功能，您可能应该使用外部变量来控制它，而不是依赖 CSS 动画。在您的控制循环中的某个地方，您可能想要减少计时器变量，然后调用 $("#progressTimer").css("width", "#{timer}%");
见：http://jsfiddle.net/3k4egrtm/

请注意，setTimeout() 也有您提到的问题。我发现别人的小提琴使用Date 对象来检查标签丢失和获得焦点之间经过了多少时间：http://jsfiddle.net/qN6eB/

我认为禁用该功能是不可能的——只是解决它。

【讨论】：