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

Ich habe diesen Code als Arbeitsdatei getestet:

var timeout = null;
    var timee = '4000'; // default time for session time out.
    $(document).bind('click keyup mousemove', function(event) {

    if (timeout !== null) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function() {
              timeout = null;
            console.log('Document Idle since '+timee+' ms');
            alert("idle window");
        }, timee);
    });

Answer 2

Auf der Grundlage der Eingaben von equiman :

class _Scheduler {
    timeoutIDs;

    constructor() {
        this.timeoutIDs = new Map();
    }

    addCallback = (callback, timeLapseMS, autoRemove) => {
        if (!this.timeoutIDs.has(timeLapseMS + callback)) {
            let timeoutID = setTimeout(callback, timeLapseMS);
            this.timeoutIDs.set(timeLapseMS + callback, timeoutID);
        }

        if (autoRemove !== false) {
            setTimeout(
                this.removeIdleTimeCallback, // Remove
                10000 + timeLapseMS, // 10 secs after
                callback, // the callback
                timeLapseMS, // is invoked.
            );
        }
    };

    removeCallback = (callback, timeLapseMS) => {
        let timeoutID = this.timeoutIDs.get(timeLapseMS + callback);
        if (timeoutID) {
            clearTimeout(timeoutID);
            this.timeoutIDs.delete(timeLapseMS + callback);
        }
    };
}

class _IdleTimeScheduler extends _Scheduler {
    events = [
        'load',
        'mousedown',
        'mousemove',
        'keydown',
        'keyup',
        'input',
        'scroll',
        'touchstart',
        'touchend',
        'touchcancel',
        'touchmove',
    ];
    callbacks;

    constructor() {
        super();
        this.events.forEach(name => {
            document.addEventListener(name, this.resetTimer, true);
        });

        this.callbacks = new Map();
    }

    addIdleTimeCallback = (callback, timeLapseMS) => {
        this.addCallback(callback, timeLapseMS, false);

        let callbacksArr = this.callbacks.get(timeLapseMS);
        if (!callbacksArr) {
            this.callbacks.set(timeLapseMS, [callback]);
        } else {
            if (!callbacksArr.includes(callback)) {
                callbacksArr.push(callback);
            }
        }
    };

    removeIdleTimeCallback = (callback, timeLapseMS) => {
        this.removeCallback(callback, timeLapseMS);

        let callbacksArr = this.callbacks.get(timeLapseMS);
        if (callbacksArr) {
            let index = callbacksArr.indexOf(callback);
            if (index !== -1) {
                callbacksArr.splice(index, 1);
            }
        }
    };

    resetTimer = () => {
        for (let [timeLapseMS, callbacksArr] of this.callbacks) {
            callbacksArr.forEach(callback => {
                // Clear the previous IDs
                let timeoutID = this.timeoutIDs.get(timeLapseMS + callback);
                clearTimeout(timeoutID);

                // Create new timeout IDs.
                timeoutID = setTimeout(callback, timeLapseMS);
                this.timeoutIDs.set(timeLapseMS + callback, timeoutID);
            });
        }
    };
}
export const Scheduler = new _Scheduler();
export const IdleTimeScheduler = new _IdleTimeScheduler();

Answer 3

Sicherlich möchten Sie wissen, wie window.requestIdleCallback() die eine Funktion in die Warteschlange stellt, die während der Leerlaufzeiten eines Browsers aufgerufen wird.

Eine elegante Verwendung dieser API sehen Sie in der Quicklink Repo .

const requestIdleCallback = window.requestIdleCallback ||
  function (cb) {
    const start = Date.now();
    return setTimeout(function () {
      cb({
        didTimeout: false,
        timeRemaining: function () {
          return Math.max(0, 50 - (Date.now() - start));
        },
      });
    }, 1);
  };

Die Bedeutung des obigen Codes ist: wenn der Browser unterstützt requestIdleCallback (prüfen Sie die Kompatibilität), verwendet es. Wenn es nicht unterstützt wird, wird ein setTimeout(()=> {}, 1) als Fallback, der die Funktion in die Warteschlange stellt, die am Ende der Ereignisschleife aufgerufen werden soll.

Dann können Sie es so verwenden:

requestIdleCallback(() => {...}, {
    timeout: 2000
  });

Der zweite Parameter ist optional, Sie können einen timeout wenn Sie sicherstellen wollen, dass die Funktion ausgeführt wird.

Answer 4

Ist es möglich, alle 10 Sekunden eine Funktion laufen zu lassen, die eine "Zähler"-Variable überprüft? Wenn das möglich ist, können Sie die Seite mit einem "on mouseover" versehen, oder nicht?

Wenn ja, verwenden Sie das Mouseover-Ereignis, um die Variable "Zähler" zurückzusetzen. Wenn Ihre Funktion aufgerufen wird und der Zähler über dem von Ihnen festgelegten Bereich liegt, führen Sie Ihre Aktion aus.

Answer 5

Ich verwende diesen Ansatz, da man die Zeit nicht ständig neu einstellen muss, wenn ein Ereignis ausgelöst wird. Stattdessen zeichnen wir nur die Zeit auf, und das erzeugt den Startpunkt für den Leerlauf.

function idle(WAIT_FOR_MINS, cb_isIdle) {
    var self = this,
        idle,
        ms = (WAIT_FOR_MINS || 1) * 60000,
        lastDigest = new Date(),
        watch;
    //document.onmousemove = digest;
    document.onkeypress = digest;
    document.onclick = digest;

    function digest() {
       lastDigest = new Date();
    }

    // 1000 milisec = 1 sec
    watch = setInterval(function() {
        if (new Date() - lastDigest > ms && cb_isIdel) {
            clearInterval(watch);
            cb_isIdle();
        }

    }, 1000*60);
},