jquery：幻灯片放映，当您在另一个浏览器选项卡中停留一段时间，然后返回到带有幻灯片放映的选项卡时，它会翻转出来

Question

http://jsfiddle.net/nicktheandroid/B7Rhe/8/

在 Chrome 中，当浏览器选项卡处于非活动状态，chrome 会减慢任何 setInterval 的速度，使其仅每秒发生一次，即使我的幻灯片每两秒一次，它仍然很混乱。

转到上面的页面，看看那里有一个幻灯片，现在单击浏览器窗口中的另一个选项卡，在那里停留 15 秒左右，然后单击返回带有幻灯片的选项卡，幻灯片将尝试快速淡入并拿出每一张幻灯片来赶上。但当我查看这些简单的幻灯片时，它们并没有发生这种情况：

http:// jonraasch.com/blog/a-simple-jquery-slideshow

然后在 Jonathan Snook 的小幻灯片上，它像我的一样混乱，但是一个插件是由他的脚本组成的，并且插件示例不会混乱 向上...？

1（搞砸了）乔纳森·斯努克的脚本： http://snook.ca/technical/fade/fade.html

2 （不会搞砸）上述插件： http://mathiasbynens.be/demo/slideshow

问题：为什么我的会搞砸，而 Jonathan Snooks 会搞砸当他的插件版本没有，而 Jon Raasch 的幻灯片也没有混乱时？

我发现其他一些问题与此有关，但他们没有我需要的答案。这是 jquery，仅供参考：

var x = 2;
console.log('Not broken');
$('.slideshow li:gt(0)').css({opacity:0});

setInterval(function() {
    var m = $('.slideshow li').size();
    x += 1;
    if (x > m) {
        x = 1;
    }
    $(".slideshow ul li:visible").animate({
        opacity: 0
    });
    $(".slideshow ul li:nth-child(" + (x) + ")").animate({
        opacity: 1
    });
}, 2000);

Answer 1

在调查和测试您的示例链接（工作和非工作）之后...我看到该链接在 Chrome 中工作正常，实际上正在使用 jquery-1.3.2 。看起来它在使用旧的 Jquery 框架的 Chrome 中运行良好。

请参阅更新链接：http://jsfiddle.net/B7Rhe/10/

Answer 2

只需这样做：

setInterval(function() {
  var m = $('.slideshow li').size();
  x += 1;
  if (x > m) {
    x = 1;
  }
  $(".slideshow ul li:visible").stop(true,true).animate({
     opacity: 0
  });

  $(".slideshow ul li:nth-child(" + (x) + ")").stop(true,true).animate({
    opacity: 1
  });

}, 2000);

非活动浏览器选项卡会缓冲一些 setInterval 或 setTimeout 函数。
stop(true,true) - 将停止所有缓冲事件并仅立即执行最后一个动画。

window.setTimeout() 方法现在限制在非活动选项卡中每秒发送不超过一次超时。此外，它现在将嵌套超时限制为 HTML5 规范允许的最小值：4 毫秒（而不是过去限制的 10 毫秒）。