Al usar setInterval, si puedo cambiar de pestañas en Chrome y volver, el control deslizante se vuelve loco de la captura de arriba

Tengo un slider jQuery en mi sitio y el código de ir a la siguiente diapositiva se encuentra en una función llamada nextImage. He utilizado setInterval para ejecutar mi función en un temporizador, y hace exactamente lo que quiero: que se ejecuta mis diapositivas en un temporizador. PERO, si he de ir al sitio en Chrome, cambiar a otra pestaña y volver, el control deslizante se ejecuta a través de las diapositivas de forma continua hasta que se alcanza’. ¿Alguien sabe de una forma de arreglar esto. La siguiente es mi código.

setInterval(function() {
nextImage();
}, 8000);
  • tal vez usted puede agregar una condición a ver si la ventana se centra u antes de ejecutar el nextImage()
  • Lo siento, ¿cómo se hace eso?
  • acabo de ver esto en un foro, pero no sé si funciona si (window.focus){nextImage();}
  • Hmm, que no parece haber funcionado bien.
  • window.focus es una función, no un valor booleano. Es probable que siempre será un truthy valor.

6 Kommentare

  1. 40

    Cómo detectar cuando una ficha se centra o no en Chrome con Javascript?

    window.addEventListener('focus', function() {
        document.title = 'focused';
    },false);
    
    window.addEventListener('blur', function() {
        document.title = 'not focused';
    },false);

    Para aplicar a su situación:

    var autopager;
    function startAutopager() {
        autopager = window.setInterval(nextImage, 8000);
    }
    function stopAutopager() {
        window.clearInterval(autopager);
    }
    
    window.addEventListener('focus', startAutopager);    
    window.addEventListener('blur', stopAutopager);

    Tenga en cuenta que en la última versión de Chromium, o hay un error o una «característica» que es lo que esta menos fiable, que requieren que el usuario ha hecho clic en, al menos, una vez en cualquier lugar en la ventana. Ver vinculadas pregunta de arriba para más detalles.

    • Esta es una solución fácil, pero creo que un mousemove & touchmove controlador sería más adecuado para ello. Así que si no hay actividad en el interior de la lengüeta para un marco de tiempo determinado, el objeto debe ser dado ya luz verde para tratar de fuego nada.
    • La respuesta citado aquí se ha actualizado y la solución dada no parece funcionar, al menos para mí. ¿Qué trabajo es la actualización de la respuesta a la citada pregunta, cual es el uso de la visibilitychange evento así: document.addEventListener('visibilitychange', function(){ document.title = document.hidden; }). @ninjagecko puede usted por favor la actualización de la respuesta en consecuencia?
  2. 15

    Puedo publicar una respuesta aquí: ¿Cómo puedo hacer setInterval también funciona cuando una ficha se inactiva en Chrome?

    Basta con hacer:

    setInterval(function() {
        $("#your-image-container").stop(true,true);
        nextImage();
    
    }, 1000);

    inactivo pestañas del navegador amortiguar algunos de los setInterval o setTimeout funciones.
    stop(true,true) – va a parar todo el búfer de eventos y ejecutar immadietly sólo en los últimos animación.

    La ventana.setTimeout() método que ahora pinzas para que no se envíen más de tiempo de espera de uno por segundo en fichas inactivas. Además, ahora abrazaderas anidada tiempos de espera de hasta el más mínimo valor permitido por la especificación de HTML5: 4 ms (en lugar de los 10 ms se utilizan para sujetar a).

    • Gracias, he buscado por todas partes por algo que arreglar esto y este lo hizo.
  3. 6

    Un par de ideas que viene a la mente:


    Idea #1

    Puede hacer que una corta ráfaga es idempotente. Por ejemplo, usted podría decir:

    function now() {
        return (new Date()).getTime();
    }
    
    var autopagerInterval = 8000;
    
    function startAutopager() {
        var startImage = getCurrentImageNumber();
        var startTime = now();
    
        var autopager = setInterval(
            function() {
                var timeSinceStart = now() - startTime();
                var targetImage = getCurrentImageNumber + Math.ceil(timeSinceStart/autopagerInterval);
                if (getCurrentImageNumber() != targetImage)
                    setImageNumber(targetImage);  //trigger animation, etc.
            },
            autopagerInterval
        );
        return autopager;
    }

    Esta manera, incluso si la función se ejecuta 1000 veces, se ejecutará sólo en unos pocos milisegundos y la animación de una sola vez.

    nota: Si el usuario sale de la página y vuelve, se ha desplazado. Esto probablemente no es lo que el cartel original quiere, pero les dejo esta solución ya que es a veces lo que quieres.


    Idea #2

    Otra forma de agregar idempotence (mientras mantiene su nextImage() función y no tener que desplazarse a la parte inferior de la página) sería tener la función de establecer un bloqueo de exclusión mutua que desaparece después de un segundo (desactivada por otro de tiempo de espera). Por lo tanto, incluso si la función setInterval fue llamado 1000 veces, sólo la primera instancia iba a correr y los otros no hacen nada.

    var locked = false;
    var autopager = window.setInterval(function(){
        if (!locked) {
            locked = true;
            window.setTimeout(function(){
                locked=false;
            }, 1000);
            nextImage();
        }
    }, 8000);

    edit: esto no funciona, consulte a continuación


    Idea #3

    He intentado de la siguiente prueba:

    function f() {
        console.log((new Date()) + window.focus());
        window.setTimeout(f, 1000);
    }
    f();

    Parece indicar que la función se llama a cada segundo. Esto es extraño… pero yo creo que esto significa que las devoluciones de llamada son se llama, pero que el página representador se niega a actualizar la página en cualquier forma gráfica, mientras que la ficha está fuera de foco, el retraso de todas las operaciones hasta que el usuario vuelve, pero las operaciones siguen acumulándose.

    También la window.focus() función no dice si la ventana tiene el foco; se le DA el foco a la ventana, y es por lo tanto irrelevante.

    Lo que queremos es que probablemente este: Cómo detectar cuando una ficha se centra o no en Chrome con Javascript? — usted puede anular su intervalo de la ventana pierde el foco (blur), y se restablecerá cuando el enfoque de ganancias.

    • Donde debo llamar a mi nextImage función con esto?
    • usted tendría una función setImageNumber(num) en lugar de nextImage = function(){setImageNumber(getCurrentImageNumber()+1)}
    • si el if (!window.focus) solución funciona, es definitivamente superior a este, sobre todo porque yo no creo que sea su intención de que el usuario volver y encontrar que la página se ha desplazado todo el camino hacia abajo
    • Por desgracia la ventana.el enfoque de la solución no está funcionando. Realmente me gustaría que iba por su simplicidad. Lo molesto de esto es que funciona bien en todos los navegadores, y sólo necesita una línea de código. Me gustaría poder hacer que funcione en Chrome demasiado, sin necesidad de una gran cantidad de código adicional.
    • mi segunda idea (actualizado) puede trabajar y es más corto, tengo una tercera próximamente
    • Gracias TAN mucho por su ayuda. Idea #2 no parece hacer el truco o bien a pesar de la desgracia :/

  4. 1

    No sé exactamente lo que está pasando en su función nextImage(), pero yo tenía un problema similar. Yo estaba usando animate() con setInterval() en jQuery, control deslizante de imágenes que he creado, y que yo estaba sintiendo lo mismo que tú cuando me cambié a una ficha diferente y nuevo. En mi caso el animate() función era la de estar en la cola, así que una vez que la ventana recuperado el foco el control deslizante volvería loco. Para solucionar esto se me acaba de parar la animate() la función de la cola.

    Hay un par de maneras que usted puede hacer esto. la más fácil es con .stop(), pero este problema y las formas de solucionarlo se documentan en el jQuery docs. Revise esta página, cerca de la parte inferior, bajo el título de notas adicionales: http://api.jquery.com/animate/

  5. 0

    Me había enfrentado problema similar, de alguna manera, este código de abajo funciona muy bien para mí.

                var t1= window.setInterval('autoScroll()', 8000);
    
        window.addEventListener('focus', function() {
            focused = true;
            window.clearInterval(t1);
            t1 = window.setInterval('autoScroll()', 8000);
        },false);
    
        window.addEventListener('blur', function() {
            focused = false;
            window.clearInterval(t1);
        },false)
    
    
    
    function autoScroll()
    
        {
    
            if ( running == true){
                if ( focused = true){
                    forwardSlide();
                }
    
    
            }
    
            else {
    
                running = true;
    
            }
    
    
    
        }
    • Sus valores de tiempo de espera 8000ms, por lo que no serán afectados por este problema (no hay solución requiere). Chrome permite setInteval a llamar todos los 1000ms cuando la pestaña no tiene el foco.
  6. 0

    Si usted está usando Soh Tanaka del control deslizante de imágenes, a continuación, sólo tiene que añadir esta…para resolver su Google Chrome problema:

    $(".image_reel").stop(true, true).fadeOut(300).animate({ left: -image_reelPosition}, 500 ).fadeIn(300);

    Tomar nota de la .la función stop (). Ignorar la decoloración y de cosas, que es lo que he usado en mi versión

    Gracias

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea