Question

so i have this script that is simply fading p tags in and out and cycling through them. For some reason if i leave the page open for awhile, they stop fading out and just start stacking on top of eachother. It takes awhile for it to happen and I think it only happens in 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 sets timeout min to 1 second when page is in hidden tab. It’s a bit weird.