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

Wenn Sie sich an eine unterstützter Browser (Chrome oder Firefox, Stand: Dezember 2018) können Sie mit dem requestIdleCallback und beinhalten die requestIdleCallback shim bei nicht unterstützten Browsern.

Answer 2

Sie könnten wahrscheinlich etwas zusammen hacken, indem Sie Mausbewegungen auf dem Körper des Formulars erkennen und eine globale Variable mit der letzten Bewegungszeit aktualisieren. Sie müssten dann einen Intervall-Timer laufen lassen, der regelmäßig die Zeit der letzten Bewegung prüft und etwas tut, wenn es lange genug her ist, dass die letzte Mausbewegung erkannt wurde.

Answer 3

Ich habe eine kleine ES6 Klasse, um Aktivität zu erkennen und andernfalls Ereignisse bei Leerlaufzeitüberschreitung auszulösen. Sie umfasst Tastatur, Maus und Touch sein kann. aktiviert und deaktiviert und hat eine sehr schlanke API:

const timer = new IdleTimer(() => alert('idle for 1 minute'), 1000 * 60 * 1);
timer.activate();

Das tut sie no hängen von jQuery ab, obwohl Sie sie möglicherweise durch Babel laufen lassen müssen, um ältere Browser zu unterstützen.

https://gist.github.com/4547ef5718fd2d31e5cdcafef0208096

Answer 4

(Teilweise inspiriert durch die gute Kernlogik von Equiman's Antwort .)

sessionExpiration.js

---

sessionExpiration.js ist leicht, aber dennoch effektiv und anpassbar. Einmal implementiert, in nur einer Zeile verwenden:

sessionExpiration(idleMinutes, warningMinutes, logoutUrl);

• Wirkt sich auf alle Registerkarten aus des Browsers, nicht nur eine.
• Geschrieben in reines JavaScript , ohne Abhängigkeiten. Vollständig clientseitig.
• (Wenn dies gewünscht wird.) Hat Warnbanner y Countdown Uhr, die durch Benutzerinteraktion gelöscht wird.
• Fügen Sie einfach die sessionExpiration.js und rufen die Funktion mit den Argumenten [1] Anzahl der Leerlaufminuten (für alle Registerkarten), bis der Benutzer abgemeldet wird, [2] Anzahl der Leerlaufminuten, bis eine Warnung und ein Countdown angezeigt werden, und [3] Logout-URL.
• Fügen Sie das CSS in Ihr Stylesheet ein. Passen Sie es an, wenn Sie möchten. (Oder überspringen Sie das Banner und löschen Sie es, wenn Sie es nicht wollen).
• Wenn Sie tun das Warnbanner wünschen, dann müssen Sie ein leeres div mit der ID sessExpirDiv auf Ihrer Seite (ein Vorschlag wäre, sie in die Fußzeile zu setzen) .
• Jetzt wird der Benutzer automatisch abgemeldet, wenn alle Registerkarten für die angegebene Dauer inaktiv waren.
• Optional: Sie können ein viertes Argument (URL serverRefresh) für die Funktion angeben, so dass ein serverseitiger Sitzungs-Timer ebenfalls aktualisiert wird, wenn Sie mit der Seite interagieren.

---

Dies ist ein Beispiel dafür, wie es in Aktion aussieht, wenn Sie das CSS nicht ändern.

Answer 5

Versuchen Sie diesen Code. Er funktioniert perfekt.

var IDLE_TIMEOUT = 10; //seconds
var _idleSecondsCounter = 0;

document.onclick = function () {
    _idleSecondsCounter = 0;
};

document.onmousemove = function () {
    _idleSecondsCounter = 0;
};

document.onkeypress = function () {
    _idleSecondsCounter = 0;
};

window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {
    _idleSecondsCounter++;
    var oPanel = document.getElementById("SecondsUntilExpire");
    if (oPanel)
        oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        alert("Time expired!");
        document.location.href = "SessionExpired.aspx";
    }
}