¿Cómo saber si el usuario está leyendo actualmente una página con Javascript?

Question

Estoy creando una página web con contenido dinámico que ingresa a la vista con el sondeo AJAX. La página JS ocasionalmente descarga información actualizada y la muestra en la página mientras el usuario está leyendo otra información. Este tipo de cosas es costoso para el ancho de banda y el tiempo de procesamiento. Me gustaría tener la pausa de votación cuando la página no se está viendo.

Me he dado cuenta de que la mayoría de las páginas web que tengo abiertas pasan la mayor parte de su tiempo minimizadas o en una pestaña no vista. Me gustaría poder detener las secuencias de comandos hasta que la página realmente se esté viendo.

No tengo ni idea de cómo hacerlo, y parece estar tratando de salir del arenero del html DOM y alcanzar el sistema del usuario. Puede ser imposible, si el motor JS no tiene conocimiento de su entorno de renderizado. Nunca he visto un sitio diferente hacer esto (no es que el usuario tenga la intención de verlo ...)

Creo que es una pregunta interesante para el debate. ¿Cómo escribirías una aplicación web con una CPU pesada para pausar cuando no se está utilizando? Darle al usuario un botón de pausa no es confiable, me gustaría que sea automático.

Answer 1

La mejor solución sería algo como esto:

var inactiveTimer; 
var active = true; 
function setTimer(){ 
    inactiveTimer = setTimeOut("stopAjaxUpdateFunction()", 120000); //120 seconds 
} 
setTimer(); 
document.onmouseover = function() { clearTimeout (inactiveTimer); 
            setTimer(); 
            resumeAjaxUpdate(); 
    }; //clear the timer and reset it. 
function stopAjaxUpdateFunction(){ 
    //Turn off AJAX update 
    active = false; 
} 
function resumeAjaxUpdate(){ 
    if(active == false){ 
    //Turn on AJAX update 
    active = true; 
    }else{ 
    //do nothing since we are still active and the AJAX update is still on. 
    }  
} 

El stopAjaxUpdateFunction debe detener el progreso de la actualización de AJAX.

Answer 2

He examinado ese problema antes para un proyecto de investigación. En ese momento (hace 2-3 años) no encontré la manera de obtener información del navegador sobre si está o no minimizado :(

Answer 3

¿Qué tal establecer un "tiempo de inactividad" que se restablece cada vez que un mouse o el evento de teclado se recibe en el DOM? Creo que es así como la mayoría de los programas de IM deciden que está "ausente" (aunque lo hacen enganchando los mensajes de entrada en el nivel de todo el sistema)

Answer 4

Puede escuchar mousemove y keypress events. Si uno de ellos se ha disparado en los últimos X segundos, continúe con su actualización. De lo contrario, no actualice.

No es perfecto, pero creo que es lo mejor que puede hacer con pure JS.

Si desea incursionar en el mundo de Flash, Silverlight o Java, es posible que pueda obtener más información del navegador.

Answer 5

Primero compruebe cuando la ventana pierde y gana el foco.

window.onblur = function() { /* stop */ }; 
window.onfocus = function() { /* start */ }; 

también, por diversas razones, el usuario puede dejar de leer la página sin hacer que pierda la concentración (por ejemplo, se levanta y se aleja de la computadora). En ese caso, debe suponer después de un período de inactividad (sin eventos de mouse o teclado) que la atención de los usuarios ha salido de la página. El código para hacer eso se describe en otra respuesta.

Answer 6

Sé que ya ha aceptado una respuesta, pero me gustaría usar personalmente una combinación de varias de las respuestas se mencionan aquí por varias razones, entre ellas:

• El uso de eventos de ratón sólo se aliena usuarios competentes en el teclado basadas hojeada.
• Uso de eventos desenfoque/enfoque no permiten a los usuarios que van hacer una taza de té ;-)

que haría uso más probable es que algo como lo siguiente como guía:

var idleTimer, userIsIdle, pollingTimer; 
document.onkeydown = document.onmousemove = resetTimer; 

window.onload = function() { 
    pollingTimer = window.setTimeout(runPollingFunction, 30000); 
    resetTimer(); 

    /* IE's onblur/onfocus is buggy */ 
    if (window.navigator.appName == "Microsoft Internet Explorer") 
     document.onfocusin = resetTimer, 
     document.onfocusout = setIdle; 
    else 
     window.onfocus = resetTimer, 
     window.onblur = setIdle; 
} 
function resetTimer() { 
    if (userIsIdle) 
     setBack(); 

    window.clearTimeout(idleTimer); 
    idleTimer = window.setTimeout(setIdle, 120000); // 2 minutes of no activity  
} 
function setIdle() { 
    userIsIdle = true; 
    window.clearTimeout(pollingTimer); // Clear the timer that initiates polling 
    window.clearTimeout(setIdle); 
} 
function setBack() { 
    userIsIdle = false; 
    runPollingFunction(); // call the polling function to instantly update page 
    pollingTimer = window.setTimeout(runPollingFunction, 300000); 
}