Jak elegancko wykryć czas bezczynności w JavaScript?

Czy w JavaScript można wykryć czas „ bezczynności ”?
Moim podstawowym zastosowaniem prawdopodobnie byłoby pobranie lub wstępne załadowanie treści.

Czas bezczynności: okres bezczynności użytkownika lub bez użycia procesora

Oto prosty skrypt używający JQuery, który obsługuje zdarzenia ruchów myszy i naciśnięć klawiszy. Po upływie czasu strona zostanie ponownie załadowana.

<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 19) { // 20 minutes
        window.location.reload();
    }
}
</script>   

Bez użycia jQuery, tylko waniliowy JavaScript:

var inactivityTime = function () {
    var time;
    window.onload = resetTimer;
    // DOM Events
    document.onmousemove = resetTimer;
    document.onkeypress = resetTimer;

    function logout() {
        alert("You are now logged out.")
        //location.href = 'logout.html'
    }

    function resetTimer() {
        clearTimeout(time);
        time = setTimeout(logout, 3000)
        // 1000 milliseconds = 1 second
    }
};

I uruchom funkcję tam, gdzie jej potrzebujesz (na przykład: onPageLoad).

window.onload = function() {
  inactivityTime(); 
}

W razie potrzeby możesz dodać więcej zdarzeń DOM. Najczęściej używane są:

document.onload = resetTimer;
document.onmousemove = resetTimer;
document.onmousedown = resetTimer; // touchscreen presses
document.ontouchstart = resetTimer;
document.onclick = resetTimer;     // touchpad clicks
document.onkeypress = resetTimer;
document.addEventListener('scroll', resetTimer, true); // improved; see comments

Lub zarejestruj pożądane zdarzenia za pomocą tablicy

window.addEventListener('load', resetTimer, true);
var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach(function(name) {
 document.addEventListener(name, resetTimer, true); 
});

Lista wydarzeń DOM : http://www.w3schools.com/jsref/dom_obj_event.asp

Pamiętaj o użyciu windowlub documentzgodnie z własnymi potrzebami. Tutaj możesz zobaczyć różnice między nimi: Jaka jest różnica między oknem, ekranem i dokumentem w JavaScript?

Kod zaktualizowany o @ frank-conijn i @daxchen ulepsz: window.onscrollnie będzie uruchamiany, jeśli przewijanie znajduje się w przewijalnym elemencie, ponieważ zdarzenia przewijania nie pękają. window.addEventListener('scroll', resetTimer, true), trzeci argument mówi słuchaczowi, aby złapał zdarzenie podczas fazy przechwytywania zamiast fazy bąbelkowej.

Poprawa odpowiedzi Equimana:

function idleLogout() {
    var t;
    window.onload = resetTimer;
    window.onmousemove = resetTimer;
    window.onmousedown = resetTimer;  // catches touchscreen presses as well      
    window.ontouchstart = resetTimer; // catches touchscreen swipes as well 
    window.onclick = resetTimer;      // catches touchpad clicks as well
    window.onkeypress = resetTimer;   
    window.addEventListener('scroll', resetTimer, true); // improved; see comments

    function yourFunction() {
        // your function for too long inactivity goes here
        // e.g. window.location.href = 'logout.php';
    }

    function resetTimer() {
        clearTimeout(t);
        t = setTimeout(yourFunction, 10000);  // time is in milliseconds
    }
}
idleLogout();

.
Oprócz ulepszeń w zakresie wykrywania aktywności i zmiany z documentna window, ten skrypt faktycznie wywołuje funkcję, a nie pozwala jej pozostać bezczynnym.

Nie wychwytuje bezpośrednio zerowego użycia procesora, ale jest to niemożliwe, ponieważ wykonanie funkcji powoduje użycie procesora. Bezczynność użytkownika ostatecznie prowadzi do zerowego użycia procesora, więc pośrednio łapie zerowe użycie procesora.

Stworzyłem małą bibliotekę, która robi to rok temu:

https://github.com/shawnmclean/Idle.js

Opis:

Mała biblioteka javascript do zgłaszania aktywności użytkownika w przeglądarce (poza domem, bezczynnie, nie patrząc na stronę, na innej karcie itp.). który jest niezależny od innych bibliotek javascript, takich jak jquery.

Użytkownicy programu Visual Studio mogą uzyskać go z NuGet poprzez: PM> Install-Package Idle.js

Oto przybliżona implementacja pomysłu tvanfosson przez jQuery:

$(document).ready(function(){

   idleTime = 0;

   //Increment the idle time counter every second.
   var idleInterval = setInterval(timerIncrement, 1000);

   function timerIncrement()
   {
     idleTime++;
     if (idleTime > 2)
     {
       doPreload();
     }
   }

   //Zero the idle timer on mouse movement.
   $(this).mousemove(function(e){
      idleTime = 0;
   });

   function doPreload()
   {
     //Preload images, etc.
   }

})

Podobne do powyższego rozwiązania Iconic (z niestandardowym zdarzeniem jQuery) ...

// use 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...
});

//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 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; // min 100ms
    if (timeout > 300000) timeout = 300000; // max 5 minutes

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

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

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

Możesz to zrobić bardziej elegancko dzięki podkreśleniu i jquery -

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

Moja odpowiedź została zainspirowana odpowiedzią vijay , ale jest krótszym, bardziej ogólnym rozwiązaniem, które, jak sądzę, podzieliłbym się z każdym, komu może pomóc.

(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);
}());

W obecnej postaci ten kod zostanie wykonany natychmiast i ponownie załaduje bieżącą stronę po 3 minutach braku ruchu myszy lub naciskania klawiszy.

Wykorzystuje zwykły waniliowy JavaScript i natychmiast wywoływane wyrażenie funkcyjne, aby obsłużyć limity czasu bezczynności w czysty i samodzielny sposób.

Znam to stosunkowo stare pytanie, ale miałem ten sam problem i znalazłem całkiem dobre rozwiązanie.

Użyłem: jquery.idle i potrzebowałem tylko:

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

Zobacz demo JsFiddle .

(Tylko dla informacji: zobacz to w celu śledzenia zdarzeń zaplecza prowadzi do ładowania przeglądarki )

Wszystkie poprzednie odpowiedzi mają zawsze aktywny moduł obsługi myszy. Jeśli procedura obsługi to jQuery, dodatkowe przetwarzanie wykonywane przez jQuery może się sumować. Zwłaszcza jeśli użytkownik korzysta z myszy do gier, może wystąpić nawet 500 zdarzeń na sekundę.

To rozwiązanie pozwala uniknąć obsługi każdego zdarzenia myszy. Powoduje to niewielki błąd synchronizacji, który można dostosować do własnych potrzeb.

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/

Prawdopodobnie możesz zhakować coś razem, wykrywając ruch myszy na treści formularza i aktualizując zmienną globalną o czasie ostatniego ruchu. Potrzebny byłby wtedy licznik interwałowy, który okresowo sprawdza czas ostatniego ruchu i robi coś, jeśli minęło wystarczająco dużo czasu od wykrycia ostatniego ruchu myszy.

Napisałem małą klasę ES6, aby wykrywać aktywność i w inny sposób uruchamiać zdarzenia w czasie bezczynności. Obejmuje klawiaturę, mysz i dotyk , może być aktywowany i dezaktywowany oraz ma bardzo uproszczony interfejs API:

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

To nie nie zależą od jQuery, choć być może trzeba go uruchomić poprzez Babel do wspierania starszych przeglądarek.

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

Mogę wydać go jako pakiet npm, gdy otrzymam jakieś uwagi.

Jeśli kierujesz reklamy na obsługiwaną przeglądarkę (Chrome lub Firefox od grudnia 2018 r.), Możesz eksperymentować z requestIdleCallback i dołączyć podkładkę requestIdleCallback dla nieobsługiwanych przeglądarek.

Wypróbuj ten kod, działa idealnie.

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";
    }
}

<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    //Zero the idle timer on mouse movement.
    $('body').mousemove(function (e) {
     //alert("mouse moved" + idleTime);
     idleTime = 0;
    });

    $('body').keypress(function (e) {
      //alert("keypressed"  + idleTime);
        idleTime = 0;
    });



    $('body').click(function() {
      //alert("mouse moved" + idleTime);
       idleTime = 0;
    });

});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 10) { // 10 minutes

        window.location.assign("http://www.google.com");
    }
}
</script> 

Myślę, że ten kod jquery jest idealny, choć skopiowany i zmodyfikowany z powyższych odpowiedzi !! nie zapomnij dołączyć biblioteki jquery do swojego pliku!

Problem ze wszystkimi tymi rozwiązaniami, choć poprawnymi, są niepraktyczne, biorąc pod uwagę cenny zestaw limitów czasu sesji, używając PHP, .NET lub w pliku Application.cfc dla programistów Coldfusion. Czas ustawiony w powyższym rozwiązaniu musi zostać zsynchronizowany z limitem czasu sesji po stronie serwera. Jeśli te dwie nie zostaną zsynchronizowane, możesz napotkać problemy, które po prostu sfrustrują i wprowadzą użytkowników w błąd. Na przykład limit czasu sesji po stronie serwera może być ustawiony na 60 minut, ale użytkownik może uważać, że jest bezpieczny, ponieważ przechwytywanie czasu bezczynności JavaScript zwiększyło całkowity czas, jaki użytkownik może spędzić na jednej stronie. Użytkownik mógł spędzić czas na wypełnianiu długiego formularza, a następnie przechodzi do jego przesłania. Upłynął limit czasu sesji przed przetworzeniem formularza. Daję moim użytkownikom 180 minut, a następnie użyj JavaScript, aby automatycznie wylogować użytkownika. Zasadniczo, używając części powyższego kodu, aby utworzyć prosty licznik czasu, ale bez części zdarzenia myszy przechwytującej. W ten sposób czas mojej strony klienta i serwera doskonale się synchronizuje. Nie ma zamieszania, jeśli pokażesz czas użytkownikowi w interfejsie użytkownika, ponieważ zmniejsza się. Za każdym razem, gdy otwierana jest nowa strona w CMS, sesja po stronie serwera i zegar JavaScript są resetowane. Prosty i elegancki. Jeśli użytkownik pozostaje na jednej stronie przez ponad 180 minut, to na pierwszym miejscu wydaje mi się, że coś jest nie tak. jak to zmniejsza. Za każdym razem, gdy otwierana jest nowa strona w CMS, sesja po stronie serwera i zegar JavaScript są resetowane. Prosty i elegancki. Jeśli użytkownik pozostaje na jednej stronie przez ponad 180 minut, to na pierwszym miejscu wydaje mi się, że coś jest nie tak. jak to zmniejsza. Za każdym razem, gdy otwierana jest nowa strona w CMS, sesja po stronie serwera i zegar JavaScript są resetowane. Prosty i elegancki. Jeśli użytkownik pozostaje na jednej stronie przez ponad 180 minut, to na pierwszym miejscu wydaje mi się, że coś jest nie tak.

Czysty JavaScript z odpowiednio ustawionym czasem resetowania i powiązaniami za pośrednictwem addEventListener

(function() {

  var t,
    timeout = 5000;

  function resetTimer() {
    console.log("reset: " + new Date().toLocaleString());
    if (t) { 
      window.clearTimeout(t); 
    }
    t = window.setTimeout(logout, timeout);
  }

  function logout() {
    console.log("done: " + new Date().toLocaleString());
  }
  resetTimer();

  //And bind the events to call `resetTimer()`
  ["click", "mousemove", "keypress"].forEach(function(name) {
    console.log(name);
    document.addEventListener(name, resetTimer);
  });

}());

(Częściowo zainspirowany dobrą podstawową logiką Equimana wcześniej w tym wątku.)

sessionExpiration.js

sessionExpiration.js jest lekki, ale skuteczny i konfigurowalny. Po wdrożeniu użyj w jednym rzędzie:

sessionExpiration(idleMinutes, warningMinutes, logoutUrl);

• Wpływa na wszystkie karty przeglądarki, nie tylko jedną.
• Napisane w czystym JavaScript , bez żadnych zależności. W pełni po stronie klienta.
• (W razie potrzeby.) Ma baner ostrzegawczy i zegar odliczający , który jest anulowany przez interakcję użytkownika.
• Wystarczy dołączyć sessionExpiration.js i wywołać funkcję z argumentami [1] liczba bezczynnych minut (na wszystkich kartach) do wylogowania użytkownika, [2] liczba bezczynnych minut do wyświetlenia ostrzeżenia i odliczania oraz [3] wyloguj się
• Umieść CSS w swoim arkuszu stylów. Dostosuj go, jeśli chcesz. (Lub pomiń i usuń banner, jeśli go nie chcesz).
• Jeśli zrobić jednak chcą baner ostrzegawczy, a następnie należy umieścić pusty div z ID sessExpirDiv na swojej stronie (sugestia jest umieszczenie go w stopce) .
• Teraz użytkownik zostanie automatycznie wylogowany, jeśli wszystkie zakładki były nieaktywne przez określony czas.
• Opcjonalne: Możesz podać czwarty argument (URL serverRefresh) dla funkcji, aby zegar sesji po stronie serwera był odświeżany również podczas interakcji ze stroną.

To jest przykład tego, jak to wygląda w akcji, jeśli nie zmienisz CSS.

Napisałem prostą wtyczkę jQuery, która zrobi to, czego szukasz.

https://github.com/afklondon/jquery.inactivity

$(document).inactivity( {
    interval: 1000, // the timeout until the inactivity event fire [default: 3000]
    mouse: true, // listen for mouse inactivity [default: true]
    keyboard: false, // listen for keyboard inactivity [default: true]
    touch: false, // listen for touch inactivity [default: true]
    customEvents: "customEventName", // listen for custom events [default: ""]
    triggerAll: true, // if set to false only the first "activity" event will be fired [default: false]
});

Skrypt będzie nasłuchiwał nieaktywności myszy, klawiatury, dotyku i innych niestandardowych zdarzeń (bezczynności) oraz wyzwalał globalne zdarzenia „aktywności” i „braku aktywności”.

Mam nadzieję że to pomoże :)

Tylko kilka myśli, aleja lub dwie do odkrycia.

Czy możliwe jest uruchamianie funkcji co 10 sekund i sprawdzanie zmiennej „licznik”? Jeśli to możliwe, możesz najechać kursorem myszy na stronę, prawda? Jeśli tak, użyj zdarzenia mouseover, aby zresetować zmienną „counter”. Jeśli twoja funkcja jest wywoływana, a licznik znajduje się powyżej zakresu, który wcześniej ustaliłeś, zrób to.

Ponownie, tylko kilka myśli ... Mam nadzieję, że to pomaga.

Przetestowałem ten plik roboczy kodu:

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);
    });

Oto najlepsze rozwiązanie, jakie znalazłem: http://css-tricks.com/snippets/jquery/fire-event-when-user-is-idle/

Oto JS:

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)

Możesz użyć niżej wymienionego rozwiązania

var idleTime;
$(document).ready(function () {
         reloadPage();
        $('html').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
            clearTimeout(idleTime);
            reloadPage();
        });
});
function reloadPage() {
    clearTimeout(idleTime);
    idleTime = setTimeout(function () {
        location.reload();
    }, 3000);
}

Korzystam z tego podejścia, ponieważ nie trzeba ciągle resetować czasu, w którym wydarzenie się uruchamia, zamiast tego rejestrujemy tylko czas, co generuje bezczynny punkt początkowy.

           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);    
        },

Prawdopodobnie możesz wykryć brak aktywności na swojej stronie internetowej, korzystając z podanych sztuczek myszy, ale to nie powie, że użytkownika nie ma na innej stronie w innym oknie lub karcie, lub że jest on w programie Word lub Photoshop lub WOW i po prostu nie patrzy teraz na twoją stronę. Generalnie po prostu wykonuję pobieranie wstępne i polegam na wielozadaniowości klienta. Jeśli naprawdę potrzebujesz tej funkcji, robisz coś z kontrolką ActiveX w systemie Windows, ale w najlepszym razie jest brzydka.

Oto usługa AngularJS do realizacji w Angular.

/* Tracks now long a user has been idle.  secondsIdle can be polled 
   at any time to know how long user has been idle. */
fuelServices.factory('idleChecker',['$interval', function($interval){
    var self = {
        secondsIdle: 0,
        init: function(){
            $(document).mousemove(function (e) {
                self.secondsIdle = 0;
            });
            $(document).keypress(function (e) {
                self.secondsIdle = 0;
            });
            $interval(function(){
                self.secondsIdle += 1;
            }, 1000)
        }
    }
    return self;
}]);

Pamiętaj, że ten kontroler bezczynności będzie działał na wszystkich trasach, dlatego należy go zainicjować .run()po załadowaniu aplikacji kątowej. Następnie możesz korzystać z idleChecker.secondsIdlekażdej trasy.

myApp.run(['idleChecker',function(idleChecker){
    idleChecker.init();
}]);

Zapowiedź naprawdę świetny pomysł! Oto wersja dla darmowych projektów jQuery:

const derivedLogout = createDerivedLogout(30);
derivedLogout(); // it could happen that user too idle)
window.addEventListener('click', derivedLogout, false);
window.addEventListener('mousemove', derivedLogout, false);
window.addEventListener('keyup', derivedLogout, false); 

function createDerivedLogout (sessionTimeoutInMinutes) {
    return _.debounce( () => {
        window.location = this.logoutUrl;
    }, sessionTimeoutInMinutes * 60 * 1000 ) 
}

Tak proste, jak to tylko możliwe, wykrywaj tylko ruchy myszy:

var idle = false;

document.querySelector('body').addEventListener('mousemove', function(e) {
    if(idle!=false)idle = false;
});

var idleI = setInterval(function()
{   
    if(idle == 'inactive')
    {
        return;
    }

    if(idle == true)
    {
        idleFunction();
        idle = 'inactive';
        return;
    }

    idle = true;
}, 30000);// half the expected time, idle will trigger after 60s in this case.

function idleFuntion()
{
   console.log('user is idle');
}

Cóż, możesz dołączyć zdarzenie kliknięcia lub przesunięcia myszy do treści dokumentu, która resetuje stoper. Mieć funkcję, którą wywołujesz w odstępach czasowych, która sprawdza, czy czas przekroczył określony czas (np. 1000 milis) i rozpoczyna wstępne ładowanie.

JavaScript nie ma sposobu na określenie wykorzystania procesora. Spowodowałoby to uszkodzenie javascript w piaskownicy.

Poza tym zaczepienie zdarzeń onmouseover i onkeydown strony prawdopodobnie działałoby.

Można również ustawić użycie setTimeout w zdarzeniu onload, aby zaplanować funkcję, która będzie wywoływana z opóźnieniem.

// Call aFunction after 1 second
window.setTimeout(aFunction, 1000);