Siehe die beiden auskommentierten Zeilen unten. Dort können Sie Code für Aktionen einfügen, die ausgeführt werden sollen, wenn der Benutzer inaktiv wird und wenn er zurückkehrt. Die Inaktivitätszeit wird in der dritten Zeile festgelegt. 1000 = 1 Sekunde.
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)Dies funktioniert, indem eine setTimeout-Funktion verwendet wird, die nach Ablauf der angegebenen Sekunden ausgelöst wird. Wenn während dieser Zeit praktisch alles passiert (die Maus bewegt sich, die Seite wird gescrollt oder eine Taste gedrückt), wird der Timeout-Zeitraum zurückgesetzt.
Sehr coole Idee, aber in Google Chrome v4.0.302.2 wiederholt die Demo nur "Sie waren 2 Sekunden inaktiv." und "Willkommen zurück." alle 10 Sekunden oder so.
Welches Betriebssystem? Ich verwende die neueste Version unter Linux und Windows, und der Code funktioniert wie erwartet.
Ich verwende Windows Vista. Wenn ich meine Maus bewege, erkennt es korrekt, dass ich zurück bin, aber wenn ich nichts berühre, geht es nach etwa 10 Sekunden fälschlicherweise davon aus, dass ich zurück bin.
Seltsam. Leider kann ich Vista hier nicht testen.
Erhöht sich die 10-Sekunden-Lücke, wenn Sie idleWait erhöhen?
Funktioniert bei mir einwandfrei! Habe es unter FF3.6 und Chrome 4.0.249.43 auf Ubuntu 9.10 ausprobiert.
Schauen Sie sich jsbin.com/uxoya an
Funktioniert einwandfrei unter Chrome 4.0.249 (Mac OSX Snow Leo)
Nur für den Fall, dass sich Leute fragen: Dieser Code hat zwei Hauptzwecke: die Möglichkeit, CPU-intensive Aufgaben auszuführen, wenn der Benutzer nicht aktiv ist, oder umgekehrt;
Verarbeitung sparen, indem teure Skripte deaktiviert werden, bis der Benutzer zurückkehrt.
Live-Beispiele sind Facebook, das AJAX-Seitenaktualisierungen stoppt, wenn es inaktiv ist, und die Webversion von GTalk (in E-Mails integriert), die den Status des Benutzers für andere anzeigt.
Funktioniert nicht mit IE8 und Chrome unter Windows7, funktioniert aber mit Firefox.
Kann mir jemand helfen, dieses Skript so zu ändern, dass es beim Inaktivitätszustand eine Seite lädt, die etwas über die GET-Methode übergibt, wie z. B. "test.php?name=johndoe"???
Cooles Snippet.
Sie sollten auch Klickereignisse an das bind-Ereignis anhängen.
Danke! Ich habe das auf http://mixedminds.com verwendet, um meinen "Scroll-to-Top"-Button auszublenden, wenn der Benutzer inaktiv ist, damit der Button auf mobilen Geräten den Inhalt nicht verdeckt. Sobald der Benutzer wieder "aktiv" ist, wird der Button angezeigt, solange der Fenster-ScrollTop() > 150 ist.
Wie würden Sie vorgehen, um die tatsächlich vergangenen Sekunden zu verfolgen (im Gegensatz zum ständigen Anhängen einer Nachricht an das HTML-Dokument mit 2 Sekunden)? Ich habe versucht, die Funktion
setInterval()zu verwenden, aber sie lieferte einige wirklich seltsame Werte. Irgendwelche Ideen? Vielen Dank im Voraus.Vielen Dank,
Ich habe dies leicht modifiziert, um inaktive Benutzer abzumelden, indem ich einen Alarm auslöse, wenn der Benutzer auf OK klickt, dann wird er zur Abmeldeseite weitergeleitet und anschließend zur Anmeldeseite.
idleTimer = null;idleState = false;
idleWait = 240000;
(function ($) { $(document).ready(function () {
$('*').bind('mousemove keydown scroll', function () {
clearTimeout(idleTimer);
if (idleState == true) {
// Reaktiviertes Ereignis
window.location.replace("logout.php");
}
idleState = false;
idleTimer = setTimeout(function () {
// Inaktivitätsereignis
alert("Sie waren " + idleWait/60000 + " Minuten inaktiv.");
idleState = true; }, idleWait);
});
$("body").trigger("mousemove");
});
})
Danke,
Nods
Habe ein funktionierendes Snippet gefunden und es in eine jQuery Mobile App integriert, und es funktioniert. Danke für den Artikel.
Gibt es eine Möglichkeit zu erkennen, ob der Benutzer zu einem anderen Fenster gewechselt ist, wenn das Browserfenster nicht aktiv ist oder der Benutzer nicht darauf ist? Es ist geöffnet, aber nicht im Fokus, dann soll eine Funktion ausgeführt werden. Vielen Dank.
Danke, Chris! Ich fand das sehr hilfreich. Außerdem wurde .bind() durch .on() ersetzt.
„Ab jQuery 3.0 ist .bind() veraltet. Es wurde durch die Methode .on() zum Anhängen von Ereignishandlern an ein Dokument abgelöst.“
http://api.jquery.com/bind/
Vielen Dank für Ihren Code. Ich habe eine Frage :) Wenn eine Seite in mehreren Tabs geöffnet ist und die Maus in einem der Tabs aktiv ist. Sie sollte in keinem der Tabs inaktiv werden. Bitte ich brauche eine Lösung dafür.
Für mehrere Tabs – verwenden Sie den lokalen Speicher oder einen Cookie, um die Zeit zu speichern – nicht sicher über die Leistungsauswirkungen – Debouncing-Probleme.