一段时间后，jquery 超时在 chrome 中失败

Question

所以我有这个脚本，它只是淡入淡出 p 标签并循环浏览它们。出于某种原因，如果我将页面打开一段时间，它们就会停止淡出并开始相互堆叠。这需要一段时间才能发生，我认为这只发生在 chrome 中。

$(document).ready(function(){

   var current_quote = 0,
   fade_interval = null,
   num_quotes = $("#quotes p").length;

  // Fade in the first quote.
   $("#quote0").fadeIn(2500);

  // Schedule for the inital fade out.
  setTimeout(fadeQuotes, 6000);

  function fadeQuotes() {
    // Fade out the current quote.
    $("#quote" + current_quote).fadeOut(2500, function() {
    // Fade in the next quote.
    current_quote = (current_quote + 1) 
    if(current_quote+1 > num_quotes)
    {
        current_quote=0;
    }
    current_quote = current_quote % num_quotes;
    $("#quote" + current_quote).fadeIn(2500);
    });


    // Set the fading interval, if it's not already set.
    if (fade_interval == null) {
      fade_interval = setInterval(fadeQuotes, 13010);
    }
  }


});

Answer 1

当页面处于隐藏选项卡时，Chrome 将超时分钟设置为 1 秒。有点奇怪。

Answer 2

我不确定这是否是解决方案，但是代码中的一些冗余可能会导致问题。试试这个...

演示：http://jsfiddle.net/wdm954/beQxv/4/

$(document).ready(function(){

    // rotate quotes
    $(function() {
        var current_quote = 0;        
        $("#quote" + current_quote).fadeIn(2500);
        setInterval(function() {
            $("#quote" + current_quote).fadeOut(2500, function() {
                current_quote++;
                if (current_quote + 1 > $("#quotes p").length) current_quote = 0;
                $("#quote" + current_quote).fadeIn(2500);
            });
        }, 5000);
    });

}); //end doc ready