Ist es möglich, " Leerlauf " -Zeiten in JavaScript zu erkennen?
Mein primärer Anwendungsfall wäre wahrscheinlich das Vorabrufen oder Vorladen von Inhalten.
Leerlaufzeit: Zeitraum der Inaktivität des Benutzers oder ohne CPU-Auslastung
javascript
Cherian
quelle
quelle
Antworten:
Hier ist ein einfaches Skript mit JQuery, das Mausbewegungs- und Tastendruckereignisse verarbeitet. Wenn die Zeit abgelaufen ist, wird die Seite neu geladen.
quelle
setInterval
, die dann als JavaScript ausgewertet wird.idleTime++;
anstelle vonidleTime = idleTime + 1;
'mousemove keydown click'
Bit-Flags (Event.MOUSEMOVE | Event.KEYDOWN | Event.CLICK
) verwenden, da diese schneller als Zeichenfolgenoperationen sind. Aber willst du das wirklich tun?Ohne Verwendung von jQuery nur Vanille-JavaScript:
Und starten Sie die Funktion dort, wo Sie sie benötigen (zum Beispiel: onPageLoad).
Sie können bei Bedarf weitere DOM-Ereignisse hinzufügen. Am häufigsten verwendet werden:
Oder registrieren Sie gewünschte Ereignisse mithilfe eines Arrays
Liste der DOM-Ereignisse : http://www.w3schools.com/jsref/dom_obj_event.asp
Denken Sie daran, verwenden
window
oderdocument
nach Ihren Bedürfnissen. Hier sehen Sie die Unterschiede zwischen ihnen: Was ist der Unterschied zwischen Fenster, Bildschirm und Dokument in Javascript?Mit @ frank-conijn und @daxchen aktualisierter Code verbessert:
window.onscroll
Wird nicht ausgelöst, wenn sich das Scrollen in einem scrollbaren Element befindet, da Scroll-Ereignisse nicht sprudeln.window.addEventListener('scroll', resetTimer, true)
Das dritte Argument weist den Hörer an, das Ereignis während der Erfassungsphase anstelle der Blasenphase abzufangen.quelle
document.onload = function () { inactivityTime(); }; document.onmousedown = function () { inactivityTime(); }; document.onkeypress = function () { inactivityTime(); }; document.ontouchstart = function () { inactivityTime(); };
Verbesserung der Antwort von Equiman:
.
Abgesehen von den Verbesserungen bei der Aktivitätserkennung und dem Wechsel von
document
zuwindow
ruft dieses Skript die Funktion tatsächlich auf, anstatt sie im Leerlauf stehen zu lassen.Die CPU-Auslastung wird nicht direkt erfasst, dies ist jedoch nicht möglich, da die Ausführung einer Funktion die CPU-Auslastung verursacht. Und Inaktivität des Benutzers führt schließlich zu einer CPU-Auslastung von Null, sodass indirekt keine CPU-Auslastung erreicht wird.
quelle
window.onscroll
nicht ausgelöst wird, wenn sich das Scrollen in einem scrollbaren Element befindet, da Scroll-Ereignisse nicht sprudeln. Mitwindow.addEventListener('scroll', resetTimer, true)
dem dritten Argument wird der Listenercapture
bubble
document.onscroll
das gleiche Problem, wird nicht ausgelöst , wenn sich das Scrollen in einem scrollbaren Kind befindet?addEventListener
stattonscroll
.Ich habe vor einem Jahr eine kleine Bibliothek erstellt, die dies tut:
https://github.com/shawnmclean/Idle.js
Beschreibung:
Visual Studio-Benutzer können es von NuGet erhalten, indem sie:
PM> Install-Package Idle.js
quelle
Hier ist eine grobe jQuery-Implementierung der Idee von tvanfosson:
quelle
setInterval
eine Schnur! Geben Sie einfach eine Funktion als Variable an!setInterval()
um den Ausdruck im globalen Bereich auszuwerten, und daher dietimerIncrement()
Funktion in der .ready-Handlerfunktion nicht gefunden wird. Dies ist ein weiterer Grund, NIEMALS Zeichenfolgen zu übergebensetInterval()
. Übergeben Sie einfach eine tatsächliche Funktionsreferenz, und Sie werden dieses Problem nicht haben, da sie im aktuellen Bereich ausgewertet werden.Ähnlich wie bei der obigen Lösung von Iconic (mit benutzerdefiniertem jQuery-Ereignis) ...
quelle
Sie können es eleganter mit Unterstrich und Abfrage tun -
quelle
Meine Antwort wurde von Vijays Antwort inspiriert , ist aber eine kürzere, allgemeinere Lösung, von der ich dachte, ich würde sie für jeden teilen, dem sie helfen könnte.
In der jetzigen Form wird dieser Code sofort ausgeführt und lädt Ihre aktuelle Seite nach 3 Minuten ohne Mausbewegung oder Tastendruck neu.
Dies verwendet einfaches Vanille-JavaScript und einen sofort aufgerufenen Funktionsausdruck , um Leerlaufzeitlimits sauber und in sich geschlossen zu behandeln.
quelle
onclick
Zuordnung entfernt, da dies wahrscheinlich nicht zusätzlich erforderlich istonmousemove
, aber offensichtlich werden alle diese Ereignisse, die programmgesteuert ausgelöst werden, weiterhin zurückgesetztidleCounter
. Ich bin mir nicht sicher, warum Sie Benutzerinteraktion simulieren würden, anstatt nur eine Funktion aufzurufen, aber wenn Sie dies aus irgendeinem Grund tun müssen, funktioniert diese Antwort offensichtlich nicht für Sie, und die meisten anderen Antworten, die ich habe, funktionieren nicht. Ich habe mir diese Frage angesehen.Ich weiß, dass es eine relativ alte Frage ist, aber ich hatte das gleiche Problem und fand eine ziemlich gute Lösung.
Ich habe verwendet: jquery.idle und ich musste nur tun:
Siehe JsFiddle-Demo .
(Nur zur Info: siehe diese für Back-End - Event - Tracking - Leads browserload )
quelle
keepTracking
Option auf einstellenfalse
. Wenn Sie zurücksetzen möchten, können Sie versuchen, neu zu initialisieren. Hier ist ein modifiziertes Beispiel, das nur einmal ausgelöst werdenAlle vorherigen Antworten haben einen immer aktiven Mausbewegungs-Handler. Wenn der Handler jQuery ist, kann sich die zusätzliche Verarbeitung, die jQuery ausführt, summieren. Insbesondere wenn der Benutzer eine Gaming-Maus verwendet, können bis zu 500 Ereignisse pro Sekunde auftreten.
Diese Lösung vermeidet die Behandlung jedes Mausbewegungsereignisses. Dies führt zu einem kleinen Zeitfehler, den Sie jedoch an Ihre Bedürfnisse anpassen können.
http://jsfiddle.net/jndxq51o/
quelle
$(startTimer)
entspricht$(document).ready(startTimer)
, sichergestellt , dass das DOM bereit ist , bevor Sie die mousemove- und keypress Ereignisse Haken.Sie könnten wahrscheinlich etwas zusammen hacken, indem Sie die Mausbewegung im Hauptteil des Formulars erkennen und eine globale Variable mit der letzten Bewegungszeit aktualisieren. Dann müsste ein Intervall-Timer ausgeführt werden, der regelmäßig die letzte Bewegungszeit überprüft und etwas unternimmt, wenn es ausreichend lange her ist, seit die letzte Mausbewegung erkannt wurde.
quelle
Ich habe eine kleine ES6-Klasse geschrieben, um Aktivitäten zu erkennen und ansonsten Ereignisse im Leerlauf auszulösen. Es deckt Tastatur, Maus und Touch ab , kann aktiviert und deaktiviert werden und verfügt über eine sehr schlanke API:
Es hängt nicht von jQuery ab, obwohl Sie es möglicherweise über Babel ausführen müssen, um ältere Browser zu unterstützen.
https://gist.github.com/4547ef5718fd2d31e5cdcafef0208096
Ich könnte es als npm-Paket veröffentlichen, sobald ich Feedback bekomme.
quelle
Wenn Sie auf einen unterstützten Browser abzielen (Chrome oder Firefox ab Dezember 2018), können Sie mit dem requestIdleCallback experimentieren und den requestIdleCallback-Shim für nicht unterstützte Browser einschließen .
quelle
Versuchen Sie diesen Code, es funktioniert perfekt.
quelle
Ich denke, dieser Abfragecode ist perfekt, obwohl er von den obigen Antworten kopiert und modifiziert wurde !! Vergessen Sie nicht, die jquery-Bibliothek in Ihre Datei aufzunehmen!
quelle
Das Problem mit all diesen Lösungen ist zwar korrekt, aber unpraktisch, wenn man das wertvolle Set für das Sitzungszeitlimit berücksichtigt, PHP, .NET oder die Datei Application.cfc für Coldfusion-Entwickler verwendet. Die von der obigen Lösung festgelegte Zeit muss mit dem Zeitlimit für die serverseitige Sitzung synchronisiert werden. Wenn die beiden nicht synchronisiert werden, können Probleme auftreten, die Ihre Benutzer nur frustrieren und verwirren. Beispielsweise kann das serverseitige Sitzungszeitlimit auf 60 Minuten festgelegt werden, der Benutzer kann jedoch davon ausgehen, dass er sicher ist, da durch die Erfassung der JavaScript-Leerlaufzeit die Gesamtzeit erhöht wurde, die ein Benutzer auf einer einzelnen Seite verbringen kann. Der Benutzer hat möglicherweise Zeit damit verbracht, ein langes Formular auszufüllen, und geht dann zum Senden. Das Sitzungszeitlimit wird möglicherweise aktiviert, bevor die Formularübermittlung verarbeitet wird. Ich neige dazu, meinen Benutzern nur 180 Minuten zu geben, Verwenden Sie dann JavaScript, um den Benutzer automatisch abzumelden. Verwenden Sie im Wesentlichen einen Teil des obigen Codes, um einen einfachen Timer zu erstellen, jedoch ohne den Teil des erfassenden Mausereignisses. Auf diese Weise wird meine clientseitige und serverseitige Zeit perfekt synchronisiert. Es gibt keine Verwirrung, wenn Sie dem Benutzer die Zeit in Ihrer Benutzeroberfläche anzeigen, da sie sich verringert. Bei jedem Zugriff auf eine neue Seite im CMS werden die serverseitige Sitzung und der JavaScript-Timer zurückgesetzt. Einfach und elegant. Wenn ein Benutzer länger als 180 Minuten auf einer einzelnen Seite bleibt, stimmt in erster Linie etwas mit der Seite nicht. wie es reduziert. Bei jedem Zugriff auf eine neue Seite im CMS werden die serverseitige Sitzung und der JavaScript-Timer zurückgesetzt. Einfach und elegant. Wenn ein Benutzer länger als 180 Minuten auf einer einzelnen Seite bleibt, stimmt in erster Linie etwas mit der Seite nicht. wie es reduziert. Bei jedem Zugriff auf eine neue Seite im CMS werden die serverseitige Sitzung und der JavaScript-Timer zurückgesetzt. Einfach und elegant. Wenn ein Benutzer länger als 180 Minuten auf einer einzelnen Seite bleibt, stimmt in erster Linie etwas mit der Seite nicht.
quelle
Reines JavaScript mit richtig eingestellter Rücksetzzeit und Bindungen über
addEventListener
quelle
(Teilweise inspiriert von der guten Kernlogik von Equiman weiter oben in diesem Thread.)
sessionExpiration.js
sessionExpiration.js ist leicht, aber effektiv und anpassbar. Einmal implementiert, in nur einer Zeile verwenden:
Dies ist ein Beispiel dafür, wie es in Aktion aussieht, wenn Sie das CSS nicht ändern.
quelle
Ich habe ein einfaches jQuery-Plugin geschrieben, das genau das tut, wonach Sie suchen.
https://github.com/afklondon/jquery.inactivity
Das Skript wartet auf Inaktivität (Leerlauf) von Maus, Tastatur, Berührung und anderen benutzerdefinierten Ereignissen und löst globale "Aktivitäts" - und "Inaktivitäts" -Ereignisse aus.
Hoffe das hilft :)
quelle
Nur ein paar Gedanken, ein oder zwei Wege zum Erkunden.
Ist es möglich, dass alle 10 Sekunden eine Funktion ausgeführt wird und eine "Zähler" -Variable überprüft wird? Wenn das möglich ist, können Sie ein Mouseover für die Seite durchführen, nicht wahr? Verwenden Sie in diesem Fall das Mouseover-Ereignis, um die Variable "counter" zurückzusetzen. Wenn Ihre Funktion aufgerufen wird und der Zähler über dem von Ihnen festgelegten Bereich liegt, führen Sie Ihre Aktion aus.
Nochmals ein paar Gedanken ... Hoffe es hilft.
quelle
Ich habe diese Code-Arbeitsdatei getestet:
quelle
Hier ist die beste Lösung, die ich gefunden habe: http://css-tricks.com/snippets/jquery/fire-event-when-user-is-idle/
Hier ist der JS:
quelle
Sie können die unten genannte Lösung verwenden
quelle
Ich verwende diesen Ansatz, da Sie die Zeit, zu der ein Ereignis ausgelöst wird, nicht ständig zurücksetzen müssen, sondern nur die Zeit aufzeichnen. Dadurch wird der Startpunkt im Leerlauf generiert.
quelle
Sie könnten wahrscheinlich mithilfe der aufgeführten Mausbewegungstricks Inaktivität auf Ihrer Webseite erkennen, aber das sagt Ihnen nicht, dass sich der Benutzer nicht auf einer anderen Seite in einem anderen Fenster oder einer anderen Registerkarte befindet oder dass sich der Benutzer in Word oder Photoshop oder WOW und befindet Sie sehen Ihre Seite derzeit nur nicht an. Im Allgemeinen würde ich nur den Prefetch durchführen und mich auf das Multitasking des Clients verlassen. Wenn Sie diese Funktionalität wirklich benötigen, tun Sie etwas mit einem ActiveX-Steuerelement in Windows, aber es ist bestenfalls hässlich.
quelle
Hier ist ein AngularJS-Dienst für die Ausführung in Angular.
Beachten Sie, dass dieser Leerlaufprüfer für alle Routen ausgeführt wird. Daher sollte er beim
.run()
Laden der Winkel-App initialisiert werden . Dann können SieidleChecker.secondsIdle
innerhalb jeder Route verwenden.quelle
Debounce eigentlich eine tolle Idee! Hier Version für jQuery kostenlose Projekte:
quelle
Erkennen Sie so einfach wie möglich, wann sich nur die Maus bewegt:
quelle
Nun, Sie können dem Dokumentkörper ein Klick- oder Mausbewegungsereignis hinzufügen, das einen Timer zurücksetzt. Haben Sie eine Funktion, die Sie in zeitlich festgelegten Intervallen aufrufen, die prüft, ob der Timer eine bestimmte Zeit (z. B. 1000 Millis) überschreitet, und starten Sie das Vorladen.
quelle
Javascript kann die CPU-Auslastung nicht ermitteln. Dies würde die darin enthaltenen Sandbox-Javascript-Läufe beschädigen.
Abgesehen davon würde es wahrscheinlich funktionieren, die Onmouseover- und Onkeydown-Ereignisse der Seite zu verknüpfen.
Sie können auch setTimeout im Ereignis onload festlegen, um eine Funktion zu planen, die nach einer Verzögerung aufgerufen werden soll.
quelle