Jquery setInterval demasiado rápido cuando proviene de otra pestaña

Question

Tengo un sitio con imágenes infinitamente deslizantes usando la función setIntervall() de jquery.

Cuando llamo a la página en Chrome 13 y cambio a otra pestaña para volver unos segundos más tarde, el deslizamiento de la imagen ocurre más rápido, como si intentara mantenerse donde estaba si no hubiera cambiado a otra lengüeta.

¿Cómo podría resolver este problema?

$(window).load(function() { 
    setInterval(nextSlide, 3500); 
}); 

function nextSlide(){ 
    offset += delta; 
    $("#slideContent").animate({left: -1 * offset}, 1000); 
} 

Solución:

me eligieron primero el consejo de jfriend00. Ahora apago el temporizador cuando la ventana se vuelve inactiva.

El código simple para hacerlo se puede encontrar here.

Answer 1

Al principio me gustaría disculparme por todos los errores, mi inglés no es perfecto.

La solución de su problema puede ser muy simple:

$(window).load(function() { 
    setInterval(nextSlide, 3500); 
}); 

function nextSlide(){ 
    offset += delta; 
    $("#slideContent").stop(true,true).animate({left: -1 * offset}, 1000); 
} 

pestañas del navegador inactivos amortiguar algunas de las funciones setInterval o SetTimeOut. stop (true, true) - detendrá todos los eventos almacenados en el búfer y ejecutará immadietly solo la última animación. Este problema también se aparece en Firefox> 5.0 - leer este artículo: Firefox 5 - changes

El método window.setTimeout() ahora abrazaderas para enviar no más de un tiempo de espera por segundo en las pestañas inactivas. Además, ahora fija los tiempos de espera anidados al valor más pequeño permitido por la especificación HTML5: 4 ms (en lugar de los 10 ms que solía utilizar).

aquí puede leer cómo funciona el animado - dispara setInterval función muchas veces. How animate really works in jQuery

Answer 2

Las versiones más recientes de Chrome aparentemente ralentizan el funcionamiento de setInterval cuando una página con pestañas está en segundo plano y luego, cuando lleva esa página hacia delante, intenta ponerse al día.

En el blog de Chromium, Google dijo:

En la próxima versión Chrome 11, tenemos la intención de reducir el consumo de CPU, incluso para las páginas que están usando setTimeout y setInterval. Para las pestañas de fondo, tenemos la intención de ejecutar cada temporizador independiente no más de una vez por segundo. Este cambio ya se ha implementado en el canal dev de Chrome y en las versiones canarias.

Su intervalo es de 3,5 segundos, pero la animación en sí puede estar utilizando temporizadores mucho más cortos.

maneras posibles de trabajo en torno a ella:

• detener su temporizador/animación cuando la ventana no es visible. Reinicie el temporizador/animación cuando la ventana se vuelva visible.
• En lugar de setInterval, use setTimeout y luego simplemente restablezca el setTimeout cada vez que se dispara para crear su propio intervalo de repetición, aunque en su caso, es el uso de jQuery de los temporizadores lo que importa. No lo sé.
• Reduzca la velocidad de sus temporizadores para que no entren en conflicto con esto (de nuevo podría estar dentro de jQuery, no en sus propios temporizadores).

La mejor opción es probablemente averiguar cuándo detenerse y luego reiniciar la animación.

Pregunta similar aquí: Chrome: timeouts/interval suspended in background tabs?.

FYI, Chrome tiene una nueva API experimental para detectar la visibilidad de la página por este motivo. Puede leer sobre esto aquí: http://code.google.com/chrome/whitepapers/pagevisibility.html. ayuda a resolver el problema cuando su página está visible, pero no tiene foco.

Answer 3

¿No han intentado utilizar setIntervalsetTimeout o en absoluto, pero sólo tiene que utilizar la función complete de la función animate para dar comienzo a la siguiente diapositiva? La función delay se establece en 2500 (es decir, 1000 para la animación restada del 3500 del setInterval). No lo he intentado con Chrome, así que avíseme si funciona.

var slider = function(n){ 
    $("#slideContent").delay(2500).animate({left: -1 * n * delta}, 
              1000, 
              function(){slider(n+1)} 
             ); 
}; 
slider(1); 

Answer 4

¿Estás utilizando Jquery 1.6?

Esto puede ser la causa ya que 1.6 utiliza requestAnimationFrame para animaciones. Es posible que desee revisar esta página a cabo un reemplazo para setInterval, clearInterval

http://blog.blenderbox.com/2011/06/24/jquery-1-6-1-and-setinterval/

código: https://gist.github.com/1002116 [editar: actualizado fuente, Edit2: actualmente no funciona con Firefox Firefox debido a errores. - Tenía hacer downgrade a jQuery 1.5]

Desde el blogger:

Luego, en el que estuviera llamando a setInterval (func, sondeo), ahora se llama requestInterval (func, sondeo). Donde llama a clearInterval (intervalo), , ahora llama a clearRequestInterval (interval);

Answer 5

tratar setInterval() funciona

<script type="text/javascript" src="js/jquery-1.5.js"></script> 
     <script type="text/javascript"> 
      var i=1; 
      $(document).ready(function(){ 
       slideShow(); 
       $("#next").click(function(){ 
        slideShow(); 
       }); 
      }); 
      function slideShow(){ 
       if(i<3){ 
        $("#slide-container").animate({ left:"+=35px" }, { duration:500}) 
        $("#slide-container").animate({ left:"-=735px" }, { duration:250}) 
        i++; 
       } 
       else { 
        $("#slide-container").animate({ left:"+=1400px" }, { duration:1000}) 
        i=1; 
       } 
       setTimeout('slideShow()',2000); 
      } 
    </script>