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

Hier ist die beste Lösung, die ich gefunden habe:

Ereignis auslösen, wenn der Benutzer inaktiv ist

Hier ist das JavaScript:

idleTimer = null;
idleState = false;
idleWait = 2000;

(function ($) {

    $(document).ready(function () {

        $('*').bind('mousemove keydown scroll', function () {

            clearTimeout(idleTimer);

            if (idleState == true) {

                // Reactivated event
                $("body").append("<p>Welcome Back.</p>");
            }

            idleState = false;

            idleTimer = setTimeout(function () {

                // Idle Event
                $("body").append("<p>You've been idle for " + idleWait/1000 + " seconds.</p>");

                idleState = true; }, idleWait);
        });

        $("body").trigger("mousemove");

    });
}) (jQuery)

Answer 2

Sie könnten wahrscheinlich Inaktivität auf Ihrer Webseite mit den aufgeführten Mausverschiebungstricks erkennen, aber das sagt Ihnen nicht, dass der Benutzer nicht auf einer anderen Seite in einem anderen Fenster oder Tab ist, oder dass der Benutzer in Wort o Photoshop , oder WoW und sieht sich Ihre Seite im Moment nicht an.

Im Allgemeinen würde ich nur den Prefetch durchführen und mich auf das Multi-Tasking des Clients verlassen. Wenn Sie wirklich diese Funktionalität benötigen, tun Sie etwas mit einer ActiveX Steuerung in Windows, aber die ist bestenfalls hässlich.

Answer 3

Hier ist ein AngularJS-Dienst für die Durchführung in Angular.

/* Tracks now long a user has been idle.  secondsIdle can be polled 
   at any time to know how long user has been idle. */
fuelServices.factory('idleChecker',['$interval', function($interval){
    var self = {
        secondsIdle: 0,
        init: function(){
            $(document).mousemove(function (e) {
                self.secondsIdle = 0;
            });
            $(document).keypress(function (e) {
                self.secondsIdle = 0;
            });
            $interval(function(){
                self.secondsIdle += 1;
            }, 1000)
        }
    }
    return self;
}]);

Denken Sie daran, dass dieser Idle-Checker für alle Routen ausgeführt wird, er sollte also in .run() beim Laden der Angular-App. Dann können Sie verwenden idleChecker.secondsIdle innerhalb jeder Route.

myApp.run(['idleChecker',function(idleChecker){
    idleChecker.init();
}]);

Answer 4

Debounce ist eigentlich eine tolle Idee! Hier ist eine Version für jQuery-freie Projekte:

const derivedLogout = createDerivedLogout(30);
derivedLogout(); // It could happen that the user is too idle)
window.addEventListener('click', derivedLogout, false);
window.addEventListener('mousemove', derivedLogout, false);
window.addEventListener('keyup', derivedLogout, false);

function createDerivedLogout (sessionTimeoutInMinutes) {
    return _.debounce( () => {
        window.location = this.logoutUrl;
    }, sessionTimeoutInMinutes * 60 * 1000 )
}

Answer 5

Nun, Sie könnten ein Klick- oder Mausbewegungsereignis an den Dokumentenkörper anhängen, das einen Timer zurücksetzt.

Rufen Sie eine Funktion in bestimmten Zeitabständen auf, die prüft, ob der Timer eine bestimmte Zeit (z. B. 1000 Millisekunden) überschritten hat, und starten Sie das Vorladen.