jquery - CSS 在浏览器中未处于事件状态时未更新？

Question

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

现在这可能在实际游戏中不会成为问题，因为如果所有客户端正在玩游戏，显然都会被标记，但情况可能并非总是如此，因为有些人会切换到不同的在玩游戏时打开选项卡，我不希望他们的计时器不同步。特别是如果我做这样的事情:

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

这将它设置为在 15 秒内从当前百分比 (100%) 耗尽到 0%，但直到用户第一次进入查看它后才会生效(如果用户再次退出)它同样会卡住，因为当你返回时，你可以看到它立即跳转。)因此，如果有人立即进入，而另一个人等待 5 秒才能看到它，那么第二个人的计时器将落后 5 秒。

这很可能是出于性能原因而完成的，因为不需要为这样看不见的东西设置动画，但考虑到我的应用程序不是很密集，并且会有这个进度条，我希望它始终如此正在运行，即使用户没有进入。有什么方法可以禁用这个可能的浏览器功能吗？

Answer 1

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

请注意，setTimeout() 也存在您提到的问题。我找到了其他人的 fiddle ，它使用 Date 对象来检查选项卡失去和获得焦点之间经过了多少时间来克服这个问题:http://jsfiddle.net/qN6eB/

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