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

Question

这是网站: esanexpharma.com。divs都在使用绝对定位。

以下是代码：

    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上运行这个程序，但是遇到了完全相同的问题。任何洞察力都将不胜感激。

Answer 1

正如@ryanpcmcquen在his answer中所说，当选项卡变得不活跃时，超时可能会被节流。

这里的问题是，您有多个并发计时器(jQuery用于.hero-1和.hero-2的计时器，以及setTimeout)。当您切换选项卡时，这些计时器可能会重叠。

为了避免这种情况，您可以连锁您的动画，您将始终只有一个计时器在一次运行。这样，即使速度减慢，它也不会重叠(注意，我为这两个div添加了一个公共类.hero )

​

var heroTextShow = function() {
  var elements = $('.hero'),
      total    = elements.length,
      index    = 0;

  (function next() {
    elements.eq(index)
            .fadeIn(500)
            .delay(5000)
            .fadeOut(200, function() {
                index++;
                if (index >= total) { index = 0; }
                next();
            });
  })();
};

heroTextShow();

.hero { position: absolute; top: 1rem; left: 1rem; display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="hero">11111111111111</div>
<div class="hero">2222222222222</div>

​

Answer 2

非活动选项卡将被修改setTimeout()调用。来自MDN：

将非活动选项卡中的超时节流到>=1000ms 为了从背景选项卡中减少负载(以及相关的电池使用量)，在非活动选项卡中，超时被节流到每秒不超过一次(1000 ms)。 火狐实现了从版本5开始的这种行为(参见bug 633421，可以通过dom.min_background_timeout_value首选项来调整1000 be常量)。Chrome从版本11 (crbug.com/66078)开始就实现了这种行为。 自从的bug 736602在火狐14中使用15分钟的超时值后，后台选项卡也可以完全卸载。

_>1000

Answer 3

jQuery在内部使用较短的时间间隔。如果间隔越来越长(如果你离开标签)，你就陷入了种族问题。可能只使用一个计时器( jquery )可能会有帮助：

(function heroTextShow() {

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

})();