非活动选项卡中的 Javascript/Jquery 计时错误

Posted 2023-05-08

【中文标题】非活动选项卡中的 Javascript/Jquery 计时错误

【英文标题】：Error with Javascript / Jquery timing in inactive tabs

【发布时间】：2013-04-30 05:26:39

【问题描述】：

我最近承担了用 javascript / jQuery 构建动画的任务。动画由一个围绕伦敦地铁地图移动的圆圈组成。每次经过车站时，车站名称都会加下划线。

我仍在努力改进它，并注意到，如果在返回页面时，选项卡处于非活动状态时，如果返回页面时的定时。因为我将它嵌入到 iframe 中当我使用 $(window).focus() 或 $(window).blur() 时它似乎不起作用。

我使用 jQuery animate 函数为圆圈设置了动画，并简单地将文本下所有行的不透明度设为 0，并对其进行延迟以将不透明度设置为 100。 我在下面放了一个链接以按原样显示动画。我目前正在调整的动画仍然存在问题，但我不确定如何解决非活动选项卡问题。任何帮助都会很棒。

无框： http://www.gbutlercreative.co.uk/london/index.html

带框架 http://www.gbutlercreative.co.uk/london/frame.html

【问题讨论】：

澄清一下，css 不透明度的最大值是 1 而不是 100。

不知道它的工作情况如何，但我刚刚的一个想法是，您可以创建一个每隔 x 秒运行一次的函数，而不是对更改不透明度的时间进行编码，而是切换最近的图像的不透明度？然后无论时间如何它都可以工作，并且只是将被硬编码的动画步骤。只是一个想法，它可能会因为有多少图像而表现不佳。

谢谢。我明白你的意思，但这个动画的问题是它需要精确到毫秒。那是为了看看

【参考方案1】：

我认为您可以使用动画回调函数，但您必须重新编码所有逻辑：

$(".icon")
  .animate(left:'+=23px',top:'+=23px',500,'linear',function()$(".Chesham").animate(opacity:1,10);)
  .animate(left:'+=22px',500,'linear',function()$(".Chalfont").animate(opacity:1,10);)

对所有人都这样做。

【讨论】：

我明白你的意思是烤的。是的，这会起作用。如果没有其他方法，我可能必须在一个动画回调函数中重新激活它，但想知道在不活动时是否有更简单的动画速度修复。例如在不活动时暂停动画或在页面未聚焦时以不同速度移动圆圈。甚至在不活动时强制速度保持不变。我注意到它在 safari 中似乎没问题，但在其他浏览器中却不行。

我注意到类似问题的解决方案。我想知道是否以及如何将其实现到我的 jQuery 中。谢谢http://***.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome