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

Ähnlich wie Peter J's Lösung (mit einem benutzerdefinierten jQuery-Ereignis)...

// Use the jquery-idle-detect.js script below
$(window).on('idle:start', function() {
  // Start your prefetch, etc. here...
});

$(window).on('idle:stop', function() {
  // Stop your prefetch, etc. here...
});

---

Datei jquery-idle-detect.js

(function($, $w) {
  // Expose configuration option
  // Idle is triggered when no events for 2 seconds
  $.idleTimeout = 2000;

  // Currently in idle state
  var idle = false;

  // Handle to idle timer for detection
  var idleTimer = null;

  // Start the idle timer and bind events on load (not DOM-ready)
  $w.on('load', function() {
    startIdleTimer();
    $w.on('focus resize mousemove keyup', startIdleTimer)
      .on('blur', idleStart) // Force idle when in a different tab/window
      ;
  ]);

  function startIdleTimer() {
    clearTimeout(idleTimer); // Clear prior timer

    if (idle) $w.trigger('idle:stop'); // If idle, send stop event
    idle = false; // Not idle

    var timeout = ~~$.idleTimeout; // Option to integer
    if (timeout <= 100)
      timeout = 100; // Minimum 100 ms
    if (timeout > 300000)
      timeout = 300000; // Maximum 5 minutes

    idleTimer = setTimeout(idleStart, timeout); // New timer
  }

  function idleStart() {
    if (!idle)
      $w.trigger('idle:start');
    idle = true;
  }

}(window.jQuery, window.jQuery(window)))

Answer 2

Eleganter geht es mit Underscore.js y jQuery :

$('body').on("click mousemove keyup", _.debounce(function(){
    // do preload here
}, 1200000)) // 20 minutes debounce

Answer 3

Alle vorangegangenen Antworten haben einen immer aktiven Mousemove-Handler. Wenn der Handler jQuery ist, kann sich die zusätzliche Verarbeitung, die jQuery durchfü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 aber an Ihren Bedarf anpassen können.

function setIdleTimeout(millis, onIdle, onUnidle) {
    var timeout = 0;
    startTimer();

    function startTimer() {
        timeout = setTimeout(onExpires, millis);
        document.addEventListener("mousemove", onActivity);
        document.addEventListener("keydown", onActivity);
    }

    function onExpires() {
        timeout = 0;
        onIdle();
    }

    function onActivity() {
        if (timeout) clearTimeout(timeout);
        else onUnidle();
        //since the mouse is moving, we turn off our event hooks for 1 second
        document.removeEventListener("mousemove", onActivity);
        document.removeEventListener("keydown", onActivity);
        setTimeout(startTimer, 1000);
    }
}

http://jsfiddle.net/jndxq51o/

Answer 4

Meine Antwort wurde inspiriert durch Vijay's Antwort sondern eine kürzere, allgemeinere Lösung, die ich allen, denen sie helfen könnte, mitteilen möchte.

(function () { 
    var minutes = true; // change to false if you'd rather use seconds
    var interval = minutes ? 60000 : 1000; 
    var IDLE_TIMEOUT = 3; // 3 minutes in this example
    var idleCounter = 0;

    document.onmousemove = document.onkeypress = function () {
        idleCounter = 0;
    };

    window.setInterval(function () {
        if (++idleCounter >= IDLE_TIMEOUT) {
            window.location.reload(); // or whatever you want to do
        }
    }, interval);
}());

In der jetzigen Form wird dieser Code sofort ausgeführt und die aktuelle Seite nach 3 Minuten ohne Mausbewegung oder Tastendruck neu geladen.

Dazu werden einfaches JavaScript und ein sofort einsetzender Funktionsausdruck um Leerlaufzeitüberschreitungen sauber und eigenständig zu behandeln.

Answer 5

Ich hatte das gleiche Problem und habe eine recht gute Lösung gefunden.

Ich habe jquery.idle und ich brauchte es nur zu tun:

$(document).idle({
  onIdle: function(){
    alert('You did nothing for 5 seconds');
  },
  idle: 5000
})

Ver JsFiddle-Demo .

(Nur zur Information: siehe dies für die Back-End-Ereignisverfolgung Leads browserload )