浏览器中没有活动标签时CSS不更新?

时间:2015-09-16 14:24:07

标签: jquery html css twitter-bootstrap tabs

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

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

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

这会将其设置为在15秒内从当前百分比(100%)消耗到0%,但在用户第一次看到它之后才会生效(如果用户选项卡再次出现它同样会冻结,因为当你回到标签时你可以看到它立即跳跃。)结果如果有人立即进入并且另一个人等待5秒才能看到它,那么第二个人的计时器将是5落后了几秒钟。

这很可能是出于性能原因而做的,因为不需要为此类动画制作无法看到的动画,但考虑到我的应用程序不是非常密集,并且会有这一个进度条,我' d喜欢它总是运行,即使用户没有标签。有没有办法禁用这个可能的浏览器功能?

1 个答案:

答案 0 :(得分:1)

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

请注意setTimeout()也有您提到的问题。我发现其他人使用Date对象来解决这个问题,以检查标签丢失和获得焦点之间已经过了多长时间:http://jsfiddle.net/qN6eB/

我不认为可以禁用该功能 - 只需解决它。