在setTimeout上运行的Jquery/Javascript文本滑块循环在您离开选项卡时中断。

以下是网站：esanexpharma.com。 div都使用绝对定位

代码如下：

    var heroTextShow = function() {
      jQuery('.hero-1').fadeIn().delay(5000).fadeOut();
      jQuery('.hero-2').delay(5300).fadeIn(500).delay(2000).fadeOut();
      setTimeout(heroTextShow, 8700);
    };

    heroTextShow();

---

代码运行正常，除非您转到另一个选项卡，然后返回，在这种情况下，会发生某种计时错误。我也尝试过在setInterval上运行这个，但是遇到了完全相同的问题。如有任何见解，将不胜感激

非活动选项卡将修改

setTimeout（）

调用。来自MDN：

非活动选项卡中的超时限制为>=1000ms

从后台减少负载（和相关的电池使用） 制表符、超时被限制为每分钟触发不超过一次 非活动选项卡中的秒（1000毫秒）

Firefox自第5版起就实现了这种行为（请参阅bug 633421 1000ms常数可以通过 dom.min\u背景\u超时\u值首选项）。Chrome实现了这一点 自版本11（crbug.com/66078）以来的行为

Android版Firefox的后台超时值为15分钟 Firefox 14中的bug 736602之后的选项卡，以及后台选项卡也可以 完全卸载

---

>1000ms

jQuery在内部使用短时间间隔。如果间隔时间越来越长（如果你离开账单），你就会陷入比赛问题。仅使用一个计时器（jquery-one）可能有助于：

(function heroTextShow() {

  jQuery('.hero-1').clearQueue().fadeIn().delay(5000).fadeOut();
  jQuery('.hero-2').delay(5300).fadeIn(500).delay(2000).fadeOut("slow",/*then*/ heroTextShow);

})();

如中所述，当选项卡变为非活动状态时，超时可能会被限制

这里的问题是您有多个并发计时器（jQuery中用于

.hero-1

和

.hero-2

的计时器，以及

设置超时的计时器）。切换选项卡时，这些计时器可能重叠

为了避免这种情况，您可以链接动画，并且每次只运行一个计时器。这样，即使速度变慢，也不会重叠（注意，我为两个div添加了一个公共类
.hero
）：


var heroTextShow=function（）{
变量元素=$（'.hero'），
总计=元素长度，
指数=0；
（函数next（）{
元素。情商（指数）
法丹先生（500）
.延迟（5000）
.fadeOut（200，函数（）{
索引++；
如果（索引>=total）{index=0；}
next（）；
});
})();
};
heroTextShow（）
.hero{位置：绝对；顶部：1rem；左侧：1rem；显示：无；}

11111111111111
2222222
您希望它在循环中运行吗？它在我的机器上工作，但是第二条文字消失得太快了是的，我不太担心。我遇到的问题是，如果我在chrome中导航到另一个选项卡并在30秒后返回，我会得到多个循环实例。或者至少是导致两个div每隔一个h1显示在彼此的顶部。