Leerlaufzeit in JavaScript erkennen

Question

Ist es möglich, die " untätig " Zeit in JavaScript?

Mein Hauptanwendungsfall wäre wahrscheinlich das Vorabholen oder Vorladen von Inhalten.

Ich definiere Leerlaufzeit als eine Periode der Inaktivität des Benutzers oder ohne jegliche CPU-Nutzung

Answer 1

Ohne jQuery, nur mit Vanilla JavaScript:

var inactivityTime = function () {
    var time;
    window.onload = resetTimer;
    // DOM Events
    document.onmousemove = resetTimer;
    document.onkeydown = resetTimer;

    function logout() {
        alert("You are now logged out.")
        //location.href = 'logout.html'
    }

    function resetTimer() {
        clearTimeout(time);
        time = setTimeout(logout, 3000)
        // 1000 milliseconds = 1 second
    }
};

Und initialisieren Sie die Funktion dort, wo Sie sie benötigen (zum Beispiel: onPageLoad).

window.onload = function() {
  inactivityTime();
}

Sie können bei Bedarf weitere DOM-Ereignisse hinzufügen. Die am häufigsten verwendeten sind:

document.onload = resetTimer;
document.onmousemove = resetTimer;
document.onmousedown = resetTimer; // touchscreen presses
document.ontouchstart = resetTimer;
document.onclick = resetTimer;     // touchpad clicks
document.onkeydown = resetTimer;   // onkeypress is deprectaed
document.addEventListener('scroll', resetTimer, true); // improved; see comments

Oder registrieren Sie die gewünschten Ereignisse mit einem Array

window.addEventListener('load', resetTimer, true);
var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach(function(name) {
 document.addEventListener(name, resetTimer, true);
});

DOM-Ereignisse Liste: http://www.w3schools.com/jsref/dom_obj_event.asp

Denken Sie an die Verwendung von window , oder document entsprechend Ihren Bedürfnissen. Hier können Sie die Unterschiede zwischen ihnen sehen: Was ist der Unterschied zwischen Fenster, Bildschirm und Dokument in JavaScript?

Code aktualisiert mit @frank-conijn und @daxchen verbessern: window.onscroll wird nicht ausgelöst, wenn sich der Bildlauf innerhalb eines rollbaren Elements befindet, da Bildlaufereignisse nicht in Blasen ausbrechen. In window.addEventListener('scroll', resetTimer, true) Das dritte Argument weist den Hörer an, das Ereignis während der Erfassungsphase und nicht während der Blasenphase abzufangen.

Answer 2

Hier ist ein einfaches Skript mit jQuery, das Mausbewegungen und Tastendruck-Ereignisse verarbeitet. Wenn die Zeit abläuft, wird die Seite neu geladen.

<script type="text/javascript">
    var idleTime = 0;
    $(document).ready(function () {
        // Increment the idle time counter every minute.
        var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

        // Zero the idle timer on mouse movement.
        $(this).mousemove(function (e) {
            idleTime = 0;
        });
        $(this).keypress(function (e) {
            idleTime = 0;
        });
    });

    function timerIncrement() {
        idleTime = idleTime + 1;
        if (idleTime > 19) { // 20 minutes
            window.location.reload();
        }
    }
</script>

Answer 3

Verbesserung der Equimans (ursprüngliche) Antwort :

function idleLogout() {
    var t;
    window.onload = resetTimer;
    window.onmousemove = resetTimer;
    window.onmousedown = resetTimer;  // catches touchscreen presses as well      
    window.ontouchstart = resetTimer; // catches touchscreen swipes as well      
    window.ontouchmove = resetTimer;  // required by some devices 
    window.onclick = resetTimer;      // catches touchpad clicks as well
    window.onkeydown = resetTimer;   
    window.addEventListener('scroll', resetTimer, true); // improved; see comments

    function yourFunction() {
        // your function for too long inactivity goes here
        // e.g. window.location.href = 'logout.php';
    }

    function resetTimer() {
        clearTimeout(t);
        t = setTimeout(yourFunction, 10000);  // time is in milliseconds
    }
}
idleLogout();

Abgesehen von den Verbesserungen bei der Aktivitätserkennung und dem Wechsel von document a window ruft dieses Skript die Funktion tatsächlich auf, anstatt sie untätig zu lassen.

Die CPU-Auslastung ist nicht direkt Null, aber das ist auch nicht möglich, da die Ausführung einer Funktion CPU-Auslastung verursacht. Und die Inaktivität des Benutzers führt schließlich zu einer CPU-Nutzung von Null, so dass es indirekt eine CPU-Nutzung von Null erfasst.

Answer 4

Ich habe eine kleine Bibliothek erstellt, die dies ermöglicht:

https://github.com/shawnmclean/Idle.js

Beschreibung:

Winzige JavaScript-Bibliothek zur Meldung von Benutzeraktivitäten im Browser (abwesend, im Leerlauf, nicht auf die Webseite schauend, in einem anderen Tab, usw.), die unabhängig von anderen anderen JavaScript-Bibliotheken wie jQuery.

Visual Studio-Benutzer können es über NuGet beziehen:

Install-Package Idle.js

Answer 5

Hier ist eine grobe jQuery-Implementierung von tvanfosson's Idee :

$(document).ready(function(){

   idleTime = 0;

   //Increment the idle time counter every second.
   var idleInterval = setInterval(timerIncrement, 1000);

   function timerIncrement()
   {
     idleTime++;
     if (idleTime > 2)
     {
       doPreload();
     }
   }

   //Zero the idle timer on mouse movement.
   $(this).mousemove(function(e){
      idleTime = 0;
   });

   function doPreload()
   {
     //Preload images, etc.
   }

})