Comment savoir si une page est en cours de lecture par l'utilisateur avec Javascript?

Question

Je crée une page Web avec un contenu dynamique qui entre dans la vue avec l'interrogation AJAX. La page JS télécharge occasionnellement des informations mises à jour et les affiche sur la page pendant que l'utilisateur lit d'autres informations. Ce genre de chose est coûteux en bande passante et en temps de traitement. Je souhaite que la relève d'interrogation soit effectuée lorsque la page n'est pas affichée.

J'ai remarqué que la plupart des pages Web que j'ai ouvertes passent la majorité de leur temps réduites ou dans un onglet non consulté. J'aimerais pouvoir mettre les scripts en pause jusqu'à ce que la page soit réellement affichée.

Je n'ai aucune idée de comment le faire, et il semble essayer de sortir du sandbox du DOM html et atteindre le système de l'utilisateur. Cela peut être impossible si le moteur JS n'a aucune connaissance de son environnement de rendu. Je n'ai même jamais vu un site différent faire cela (pas que l'utilisateur est destiné à le voir ...)

Donc, il fait une question intéressante pour la discussion, je pense. Comment écririez-vous une application Web qui est lourde de CPU pour faire une pause quand elle n'est pas utilisée? Donner à l'utilisateur un bouton de pause n'est pas fiable, je voudrais que ce soit automatique.

Answer 1

Votre meilleure solution serait quelque chose comme ceci:

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. 
    }  
} 

Le stopAjaxUpdateFunction devrait arrêter la progression de la mise à jour AJAX.

Answer 2

J'ai déjà examiné ce problème pour un projet de recherche. À l'époque (il y a 2-3 ans) je n'ai pas trouvé un moyen d'obtenir des informations du navigateur pour savoir si vous êtes minimisé ou non :(

Answer 3

Comment régler un "délai d'inactivité" qui se réinitialise chaque fois qu'une souris ou un événement clavier est reçu dans le DOM? Je crois que c'est la façon dont la plupart des programmes de messagerie instantanée décident que vous êtes "absent" (bien qu'ils le font en accrochant les messages d'entrée au niveau du système)

Answer 4

Vous pouvez écouter événements mousemove et keypress Si l'un de ceux-ci a été déclenché au cours des X dernières secondes, continuez votre mise à jour, sinon ne mettez pas à jour

Ce n'est pas parfait, mais je pense que c'est le meilleur que vous pouvez faire avec pure JS.

Si vous souhaitez vous aventurer dans le monde de Flash, Silverlight ou Java, vous pouvez obtenir plus d'informations à partir du navigateur.

Answer 5

Commencez par vérifier quand la fenêtre perd et gagne le focus.

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

En outre, pour diverses raisons, l'utilisateur peut arrêter de lire la page sans lui faire perdre le focus (par exemple, il se lève et marche loin de l'ordinateur). Dans ce cas, vous devez supposer après une période d'inactivité (pas d'événements de souris ou de clavier) que l'attention des utilisateurs a quitté la page. Le code pour le faire est décrit dans une autre réponse.

Answer 6

Je sais que vous avez déjà accepté une réponse mais je aimerais personnellement utiliser une combinaison de plusieurs des réponses mentionnées ici pour diverses raisons, notamment:

• Utilisation des événements de souris seulement aliène utilisateurs compétents au clavier à base navigation
• Utilisation des événements flou/focus ne permettent pas aux utilisateurs qui vont faire une tasse de thé ;-)

Je utiliseraient très probablement quelque chose comme ce qui suit comme une ligne directrice:

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); 
}