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

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

        //Zero the idle timer on mouse movement.
        $('body').mousemove(function (e) {
            //alert("mouse moved" + idleTime);
            idleTime = 0;
        });

        $('body').keypress(function (e) {
            //alert("keypressed"  + idleTime);
            idleTime = 0;
        });

        $('body').click(function() {
            //alert("mouse moved" + idleTime);
            idleTime = 0;
        });
    });

    function timerIncrement() {
        idleTime = idleTime + 1;
        if (idleTime > 10) { // 10 minutes

            window.location.assign("http://www.google.com");
        }
    }
</script>

Ich denke, diese jQuery-Code ist perfekt ein, obwohl kopiert und geändert von oben Antworten!!!

Vergessen Sie nicht, die jQuery-Bibliothek in Ihre Datei aufzunehmen!

Answer 2

Reines JavaScript mit einer richtig eingestellten Rücksetzzeit und Bindungen über addEventListener :

(function() {

  var t,
    timeout = 5000;

  function resetTimer() {
    console.log("reset: " + new Date().toLocaleString());
    if (t) {
      window.clearTimeout(t);
    }
    t = window.setTimeout(logout, timeout);
  }

  function logout() {
    console.log("done: " + new Date().toLocaleString());
  }
  resetTimer();

  //And bind the events to call `resetTimer()`
  ["click", "mousemove", "keypress"].forEach(function(name) {
    console.log(name);
    document.addEventListener(name, resetTimer);
  });

}());

Answer 3

Das Problem mit all diesen Lösungen, obwohl sie korrekt sind, ist, dass sie unpraktisch sind, wenn man den wertvollen Sitzungs-Timeout berücksichtigt, der mit PHP, .NET oder in der Datei Application.cfc für ColdFusion Entwickler.

Die mit der obigen Lösung eingestellte Zeit muss mit dem serverseitigen Sitzungs-Timeout synchronisiert werden. Wenn die beiden nicht synchronisiert sind, kann es zu Problemen kommen, die Ihre Benutzer nur frustrieren und verwirren.

Beispielsweise könnte die serverseitige Sitzungszeit auf 60 Minuten eingestellt sein, aber der Benutzer könnte glauben, dass er/sie sicher ist, weil die Erfassung der Leerlaufzeit durch JavaScript die Gesamtzeit, die ein Benutzer auf einer einzelnen Seite verbringen kann, erhöht hat. Der Benutzer hat vielleicht ein langes Formular ausgefüllt und will es dann abschicken. Die Sitzungszeitüberschreitung kann eintreten, bevor das Formular verarbeitet wird.

Ich neige dazu, meinen Benutzern nur 180 Minuten Zeit zu geben und dann JavaScript zu verwenden, um den Benutzer automatisch abzumelden. Im Wesentlichen mit einigen der Code oben, um einen einfachen Timer zu erstellen, aber ohne die Erfassung Maus-Ereignis Teil.

Auf diese Weise wird die Zeit auf dem Client und auf dem Server perfekt synchronisiert. Es gibt keine Verwirrung, wenn Sie dem Benutzer die Zeit in Ihrer Benutzeroberfläche anzeigen, da sie sich verringert. Jedes Mal, wenn eine neue Seite im CMS aufgerufen wird, werden die serverseitige Sitzung und der JavaScript-Timer zurückgesetzt. Einfach und elegant. Wenn ein Benutzer länger als 180 Minuten auf einer einzigen Seite verweilt, denke ich, dass mit der Seite etwas nicht stimmt.

Answer 4

Ich habe ein einfaches jQuery-Plugin geschrieben, das genau das tut, wonach Sie suchen.

https://github.com/afklondon/jquery.inactivity

$(document).inactivity( {
    interval: 1000, // the timeout until the inactivity event fire [default: 3000]
    mouse: true, // listen for mouse inactivity [default: true]
    keyboard: false, // listen for keyboard inactivity [default: true]
    touch: false, // listen for touch inactivity [default: true]
    customEvents: "customEventName", // listen for custom events [default: ""]
    triggerAll: true, // if set to false only the first "activity" event will be fired [default: false]
});

Das Skript wartet auf Maus-, Tastatur-, Berührungs- und andere benutzerdefinierte Ereignisse bei Inaktivität (Leerlauf) und löst globale "Aktivität"- und "Inaktivitäts"-Ereignisse aus.

Answer 5

Sie können die unten genannte Lösung verwenden

var idleTime;
$(document).ready(function () {
         reloadPage();
        $('html').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
            clearTimeout(idleTime);
            reloadPage();
        });
});
function reloadPage() {
    clearTimeout(idleTime);
    idleTime = setTimeout(function () {
        location.reload();
    }, 3000);
}