How to detect idle time in JavaScript elegantly

Question

Is it possible to detect  idle  time in JavaScript  My primary use case probably would be to pre-fetch or preload content   Idle time  Period of user inactivity or without any CPU usage

User · Answer

You could probably hack something together by detecting mouse movement on the body of the form and updating a global variable with the last movement time   You d then need to have an interval timer running that periodically checks the last movement time and does something if it has been sufficiently long since the last mouse movement was detected

User · Answer

Partially inspired by the good core logic of Equiman earlier in this thread    sessionExpiration js    sessionExpiration js is lightweight yet effective and customizable  Once implemented  use in just one row   sessionExpiration idleMinutes  warningMinutes  logoutUrl      Affects all tabs of the browser  not just one  Written in pure JavaScript  with no dependencies  Fully client side   If so wanted   Has warning banner and countdown clock  that is cancelled by user interaction  Simply include the sessionExpiration js  and call the function  with arguments  1  number of idle minutes  across all tabs  until user is logged out   2  number of idle minutes until warning and countdown is displayed  and  3  logout url  Put the CSS in your stylesheet  Customize it if you like   Or skip and delete banner if you don t want it   If you do want the warning banner however  then you must put an empty div with ID sessExpirDiv on your page  a suggestion is putting it in the footer   Now the user will be logged out automatically if all tabs have been inactive for the given duration  Optional  You may provide a fourth argument  URL serverRefresh  to the function  so that a server side session timer is also refreshed when you interact with the page      This is an example of what it looks like in action  if you don t change the CSS

User · Answer

lt script type  text javascript  gt  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  gt  10       10 minutes          window location assign  http   www google com             lt  script gt     I think this jquery code is perfect one   though copied and modified from above answers   donot forgot to include jquery library in your file

User · Answer

My answer was inspired by vijay s answer  but is a shorter  more general solution that I thought I d share for anyone it might help    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  gt   IDLE TIMEOUT                window location reload       or whatever you want to do                  interval           As it currently stands  this code will execute immediately and reload your current page after 3 minutes of no mouse movement or key presses   This utilizes plain vanilla JavaScript and an immediately-invoked function expression to handle idle timeouts in a clean and self-contained manner

User · Answer

Javascript has no way of telling the CPU usage   This would break the sandbox javascript runs inside   Other than that  hooking the page s onmouseover and onkeydown events would probably work   You could also set use setTimeout in the onload event to schedule a function to be called after a delay      Call aFunction after 1 second window setTimeout aFunction  1000

User · Answer

You could probably detect inactivity on your web page using the mousemove tricks listed  but that won t tell you that the user isn t on another page in another window or tab  or that the user is in Word or Photoshop  or WOW and just isn t looking at your page at this time  Generally I d just do the prefetch and rely on the client s multi-tasking  If you really need this functionality you do something with an activex control in windows  but it s ugly at best

User · Answer

Without using jQuery  only vanilla JavaScript  var inactivityTime   function          var time      window onload   resetTimer         DOM Events     document onmousemove   resetTimer      document onkeypress   resetTimer       function logout             alert  quot You are now logged out  quot             location href    logout html             function resetTimer             clearTimeout time           time   setTimeout logout  3000             1000 milliseconds   1 second           And init the function where you need it  for example  onPageLoad   window onload   function       inactivityTime        You can add more DOM events if you need to  Most used are  document onload   resetTimer  document onmousemove   resetTimer  document onmousedown   resetTimer     touchscreen presses document ontouchstart   resetTimer  document onclick   resetTimer         touchpad clicks document onkeydown   resetTimer       onkeypress is deprectaed document addEventListener  scroll   resetTimer  true      improved  see comments  Or register desired events using an array window addEventListener  load   resetTimer  true   var events     mousedown    mousemove    keypress    scroll    touchstart    events forEach function name     document addEventListener name  resetTimer  true         DOM Events list  http   www w3schools com jsref dom obj event asp Remember use window  or document according your needs  Here you can see the differences between them  What is the difference between window  screen  and document in Javascript  Code Updated with  frank-conijn and  daxchen improve  window onscroll will not fire if scrolling is inside a scrollable element  because scroll events don t bubble  window addEventListener  scroll   resetTimer  true   the third argument tells the listener to catch event during capture phase instead of bubble phase

User · Answer

Tried  freddoo solution but it didn t work for 1 minute timeouts so I ve changed it slightly to record the date time when the user last clicked on the page and in my timerIncrement function I calculate the difference between the current time and the last clicked time and if the value happens to be bigger or equal to the timeout value then I redirect   var clickedDate   new Date    var idleTime   1     function timerIncrement          var nowDate   new Date        var diffMs    nowDate - clickedDate     Milliseconds between now  amp  the last time a user clicked somewhere on the page     var diffMins   Math round   diffMs   86400000    3600000    60000     Convert ms to minutes      if  diffMins  gt   idleTime              Redirect user to home page etc               document  ready function           var idleInterval   setInterval timerIncrement  60000      1 minute        this  click function  e            clickedDate   new Date

User · Answer

I finally got this working for my site  I found equiman s answer the most helpful  The problem with this answer is that the alert   function in javascript pauses the script execution  Pausing execution is a problem if you want  as I did  an alert to be sent and then if no response received for the site to automatically logout   The solution is to replace the alert   with a custom division  described here   Here s the code   NOTE  you ll need to change line 58 to redirect to an appropriate url for your site    x000D   x000D  var inactivityTracker   function      x000D   x000D       Create an alert division x000D    var alertDiv   document createElement  div    x000D    alertDiv setAttribute  style   position  absolute top  30  left  42 5  width  200px height  37px background-color  red text-align  center  color white    x000D    alertDiv innerHTML    You will be logged out in 5 seconds     x000D   x000D       Initialise a variable to store an alert and logout timer x000D    var alertTimer  x000D    var logoutTimer  x000D   x000D       Set the timer thresholds in seconds x000D    var alertThreshold   3  x000D    var logoutThreshold   5  x000D   x000D       Start the timer x000D    window onload   resetAlertTimer  x000D   x000D       Ensure timer resets when activity logged x000D    registerActivityLoggers resetAlertTimer   x000D   x000D             FUNCTIONS          x000D   x000D       Function to register activities for alerts x000D    function registerActivityLoggers functionToCall    x000D      document onmousemove   functionToCall  x000D      document onkeypress   functionToCall  x000D      x000D   x000D       Function to reset the alert timer x000D    function resetAlertTimer     x000D      clearTimeout alertTimer   x000D      alertTimer   setTimeout sendAlert  alertThreshold   1000   x000D      x000D   x000D       Function to start logout timer x000D    function startLogoutTimer     x000D      clearTimeout logoutTimer   x000D      logoutTimer   setTimeout logout  logoutThreshold   1000   x000D      x000D   x000D       Function to logout x000D    function sendAlert     x000D   x000D         Send a logout alert x000D      document body appendChild alertDiv   x000D   x000D         Start the logout timer x000D      startLogoutTimer    x000D   x000D         Reset everything if an activity is logged x000D      registerActivityLoggers reset   x000D      x000D   x000D       Function to logout x000D    function logout    x000D   x000D        location href    index php   x000D      x000D   x000D       Function to remove alert and reset logout timer x000D    function reset    x000D   x000D         Remove alert division x000D      alertDiv parentNode removeChild alertDiv   x000D   x000D         Clear the logout timer x000D      clearTimeout logoutTimer   x000D   x000D         Restart the alert timer x000D      document onmousemove   resetAlertTimer  x000D      document onkeypress   resetAlertTimer  x000D      x000D     x000D   lt html gt  x000D   x000D     lt script type  text javascript  src  js inactivityAlert js  gt  lt  script gt   x000D   x000D     lt head gt  x000D     lt title gt Testing an inactivity timer lt  title gt  x000D    lt  head gt  x000D    lt body onload  inactivityTracker      gt  x000D        Testing an inactivity timer x000D     lt  body gt  x000D     x000D   lt  html gt  x000D   x000D   x000D

User · Answer

The implementation I m proposing here is different to the other answers in the following ways    the idle event  by default named  idleTimeSeconds   is fired every 10 seconds  so you can have multiple subscribers to the same event there is only one timer set per the document instance the timer is fired more often then the idle event  by default every 1 second vs every 10 seconds  - this will make for the default interval precision the timestamp of when the idle time started is recorded and is used to calculate the total idle time  other solutions propose to incrementally add seconds to the idle time counter  which is less prices because the actual delay of a timer may be longer than configured  see  Reasons for delays longer than specified in WindowOrWorkerGlobalScope setTimeout    for examples  the timer is never cancelled   reset  as proposed by some other solutions  cancelling and resetting timers is more expensive   File Idle js   import   from  jquery    export const IDLE EVENT NAME    idleTimeSeconds           How often an  idleTimeSeconds  event is fired on the document instance         type  number      const IDLE EVENT RATE SECONDS   10          How often the idle time is checked against the IDLE EVENT RATE SECONDS        Should be much smaller than the value of IDLE EVENT RATE SECONDS     the smaller the value is  the more precisely the event is fired  -    because the actual delay may be longer  see  Reasons for delays    longer than specified in WindowOrWorkerGlobalScope setTimeout   for examples      https   developer mozilla org en-US docs Web API WindowOrWorkerGlobalScope setTimeout Reasons for delays longer than specified        type  number      const IDLE TIMER RATE SECONDS   1          Because the actual timer delay may be longer  we track the timestamp    when the idle time started  instead of incrementally adding to the total idle time     Having a starting point  we can always calculate the idle time precisely    without accumulating delay errors         type  number      let idleStartTimeMilliseconds          Holds the interval reference      let idleInterval          Holds the value of the latest idle time value    for which the event was fired  integer value in seconds         The value is therefore factor of IDLE EVENT RATE SECONDS         type  number      let lastFiredSeconds   const  document     document           Resets the idle timer     Called on user interaction events  like keydown or touchstart      function resetIdleStartTime             Reset the timestamp when the idle time started     idleStartTimeMilliseconds    new Date  getTime            Reset the latest idle time value for which the even was fired         integer value in seconds       lastFiredSeconds   0            Ticks every IDLE TIMER RATE SECONDS  which is more often than the expected    idle event firing rate        Fires the  idleTimeSeconds  event on the document instance      function timerCallback          const nowMilliseconds    new Date  getTime        const idleTimeSeconds   Math floor  nowMilliseconds - idleStartTimeMilliseconds    1000           When do we expect the idle event to be fired again         For example  if the event firing rate is 10 seconds         and last time it was fired at 40 seconds of idle time         the next one will be at 40   10   50 seconds      const nextIdleSecondsToFire   lastFiredSeconds   IDLE EVENT RATE SECONDS       if  idleTimeSeconds  gt   nextIdleSecondsToFire                Record last fired idle time that is factor of the rate             so that we keep firing the event as close to the desired rate as possible         lastFiredSeconds   nextIdleSecondsToFire            document triggerHandler IDLE EVENT NAME   idleTimeSeconds                Initialize the idle timer once only per the document instance   function             Start the idle timer     idleInterval   setInterval timerCallback  IDLE TIMER RATE SECONDS   1000           Reset the idle time start timestamp      document on  mousemove keydown mousedown touchstart   resetIdleStartTime         Example usage  e g  file index js    import  IDLE EVENT NAME  from    Idle   import   from  jquery      function           document  on IDLE EVENT NAME  function e  idleSeconds            console log  IDLE SECONDS    idleSeconds                 Example output  excerpt    IDLE SECONDS  580 IDLE SECONDS  590 IDLE SECONDS  600 IDLE SECONDS  610 IDLE SECONDS  620 IDLE SECONDS  630 IDLE SECONDS  640 IDLE SECONDS  650 IDLE SECONDS  660 IDLE SECONDS  670 IDLE SECONDS  680 IDLE SECONDS  691 IDLE SECONDS  700 IDLE SECONDS  710 IDLE SECONDS  720 IDLE SECONDS  730 IDLE SECONDS  740 IDLE SECONDS  750 IDLE SECONDS  761 IDLE SECONDS  770 IDLE SECONDS  780 IDLE SECONDS  790 IDLE SECONDS  800 IDLE SECONDS  810 IDLE SECONDS  820 IDLE SECONDS  830 IDLE SECONDS  840 IDLE SECONDS  850 IDLE SECONDS  860 IDLE SECONDS  871 IDLE SECONDS  880 IDLE SECONDS  890 IDLE SECONDS  900 IDLE SECONDS  910 IDLE SECONDS  921   The output above is produced when I switch to another tab s  and do some activities there for a while  As it can be seen  the timer is sometimes delayed  I suppose because it is not a priority for the timer to get fired with precise rate when in a background tab   But the idle timer still fires at the correct intervals   - 1 second  In this case  1 second is the precision of the idle timer  configured via the IDLE TIMER RATE SECONDS constant in Idle js

User · Answer

The problem with all these solutions  although correct  they are impractical  when taking into account the session timeout valuable set  using PHP   NET or in the Application cfc file for Coldfusion developers  The time set by the above solution needs to sync with the server side session timeout  If the two do not sync  you can run into problems that will just frustrate and confuse your users  For example  the server side session timeout might be set to 60 minutes  but the user may believe that he she is safe  because the JavaScript idle time capture has increased the total amount of time a user can spend on a single page  The user may have spent time filling in a long form  and then goes to submit it  The session timeout might kick in before the form submission is processed  I tend to just give my users 180 minutes  and then use JavaScript to automatically log the user out  Essentially  using some of the code above  to create a simple timer  but without the capturing mouse event part  In this way my client side  amp  server side time syncs perfectly  There is no confusion  if you show the time to the user in your UI  as it reduces  Each time a new page is accessed in the CMS  the server side session  amp  JavaScript timer are reset  Simple  amp  elegant  If a user stays on a single page for more than 180 minutes  I figure there is something wrong with the page  in the first place

User · Answer

Here is an AngularJS service for accomplishing in 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         Keep in mind this idle checker will run for all routes  so it should be initialized in  run   on load of the angular app   Then you can use idleChecker secondsIdle inside each route   myApp run   idleChecker  function idleChecker       idleChecker init

User · Answer

You can do it more elegantly with underscore and jquery-     body   on  click mousemove keyup     debounce function           do preload here    1200000      20 minutes debounce

User · Answer

I have tested this code working file           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

User · Answer

Improving on Equiman s  original  answer  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 onkeydown   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       Apart from the improvements regarding activity detection  and the change from document to window  this script actually calls the function  rather than letting it sit idle by  It doesn t catch zero CPU usage directly  but that is impossible  because executing a function causes CPU usage  And user inactivity eventually leads to zero CPU usage  so indirectly it does catch zero CPU usage

User · Answer

I have created a small lib that does this a year ago   https   github com shawnmclean Idle js  Description      Tiny javascript library to report activity of user in the browser    away  idle  not looking at webpage  in a different tab  etc   that is independent of any   other javascript libraries such as jquery    Visual Studio users can get it from NuGet by  PM gt  Install-Package Idle js

User · Answer

For other users with the same problem  Here is a function i just made up   It does NOT run on every mouse movement the user makes  or clears a timer every time the mouse moves    lt script gt     Timeout in seconds var timeout   10     10 seconds     You don t have to change anything below this line  except maybe    the alert  Welcome back     -     ---------------------------------------------------------------- var pos       prevpos       timer   0  interval   timeout   5   1000  timeout   timeout   1000 - interval  function mouseHasMoved e       document onmousemove   null      prevpos   pos      pos   e pageX         e pageY      if timer  gt  timeout           timer   0          alert  Welcome back             setInterval function        if pos    prevpos           timer    interval       else          timer   0          prevpos   pos            document onmousemove   function e           mouseHasMoved e            interval    lt  script gt

User · Answer

As simple as it can get  detect when mouse moves only   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

User · Answer

Pure JavaScript with properly set reset time and bindings via 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

User · Answer

Just a few thoughts  an avenue or two to explore   Is it possible to have a function run every 10 seconds  and have that check a  counter  variable   If that s possible  you can have an on mouseover for the page  can you not   If so  use the mouseover event to reset the  counter  variable   If your function is called  and the counter is above the range that you pre-determine  then do your action   Again  just some thoughts    Hope it helps

User · Answer

I know it a relatively old question  but I had the same issue and I found a quite good solution   I used  jquery idle and I only needed to do     document  idle     onIdle  function        alert  You did nothing for 5 seconds           idle  5000      See JsFiddle demo    Just for Info  see this for back-end event tracking Leads browserload

User · Answer

You can use the below mentioned solution  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

User · Answer

If you are targeting a supported browser  Chrome or Firefox as of December 2018  you can experiment with the requestIdleCallback and include the requestIdleCallback shim for unsupported browsers

User · Answer

Here is the best solution I have found   http   css-tricks com snippets jquery fire-event-when-user-is-idle   Here is the 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   lt p gt Welcome Back  lt  p gt                                            idleState   false               idleTimer   setTimeout function                           Idle Event                    body   append   lt p gt You ve been idle for     idleWait 1000     seconds  lt  p gt                      idleState   true     idleWait                           body   trigger  mousemove                 jQuery

User · Answer

I wrote a small ES6 class to detect activity and otherwise fire events on idle timeout  It covers keyboard  mouse and touch  can be activated and deactivated and has a very lean API   const timer   new IdleTimer      gt  alert  idle for 1 minute    1000   60   1   timer activate      It does not depend on jQuery  though you might need to run it through Babel to support older browsers    https   gist github com 4547ef5718fd2d31e5cdcafef0208096  I might release it as an npm package once I get some feedback

User · Answer

I wrote a simple jQuery plugin that will do what you are looking for   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        The script will listen for mouse  keyboard  touch and other custom events inactivity  idle  and fire global  activity  and  inactivity  events   Hope this helps

User · Answer

Well you could attach a click or mousemove event to the document body that resets a timer  Have a function that you call at timed intervals that checks if the timer is over a specified time  like 1000 millis  and start your preloading

User · Answer

Surely you want to know about window requestIdleCallback    which queues a function to be called during a browser s idle periods   You can see an elegant usage of this API in the 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          The meaning of the code above is  if the browser supports requestIdleCallback  check the compatibility   uses it  If is not supported  uses a setTimeout     gt      1  as fallback  which should queue the function to be called at the end of the event loop   Then you can use it like this   requestIdleCallback      gt               timeout  2000         The second parameter is optional  you might want to set a timeout if you want to make sure the function is executed

User · Answer

I use this approach  since you don t need to constantly reset the time when an event fires  instead we just record the time  this generates the idle start point              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  gt  ms  amp  amp  cb isIdel                        clearInterval watch                       cb isIdle                                      1000 60

User · Answer

Similar to Iconic s solution above  with jQuery custom event         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  lt   100  timeout   100     min 100ms     if  timeout  gt  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

User · Answer

All the previous answers have an always-active mousemove handler   If the handler is jQuery  the additional processing jQuery performs can add up   Especially if the user is using a gaming mouse  as many as 500 events per second can occur   This solution avoids handling every mousemove event   This result in a small timing error  but which you can adjust to your need   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

User · Answer

You asked for elegancy  and I created a simple class to also support a lazy check  which has an idle state   aside to the imperative way  with callbacks   In addition  this class supports  backToActive  when the idle time is violated   class Idle       constructor timeout   10  idleCallback   null  backToActiveCallback   null  autoStart   true  backToActiveOnXHR   false            this timeout   timeout         this idleCallback   idleCallback         this backToActiveCallback   backToActiveCallback         this autoStart   autoStart    only F5         this backToActiveOnXHR   backToActiveOnXHR         this idle   false         this timer   null         this events     scroll    mousedown    mousemove    keypress    scroll    touchstart           this init              init             if this backToActiveOnXHR                this events push  load                     this events forEach name   gt                window addEventListener name  this backToActive  true                     if this autoStart                this backToActive                        goIdle        gt            this idle   true         if   this idleCallback                this idleCallback this timeout                       backToActive        gt            if this idle                this backToActiveCallback                     this idle   false         clearTimeout this timer          this timer   setTimeout this goIdle  this timeout   1000            Usage   let idleCallback   timeout   gt    console log  Went idle after   timeout  seconds     let backToActiveCallback        gt    console log  Back to active     let idle   new Idle 30  idleCallback  backToActiveCallback    Result in devtools      Went idle after 30 seconds  lt --- goes idle when no activity is detected    Back to active  lt --- when the user is detected again   The advantage of supporting laziness   setInterval      gt        common fetchApi   api v1 list     status  idle idle    away     online     then    show a list of elements        1000   5    Why would you want a lazy check  Sometimes we use a periodic XHR  with setInterval   i e  when a user watch a list of flights  rides  movies  orders etc  With each XHR we then can add information about his activity status  online   away   so we have a sense of active users in our system   My class is based on Equiman s  amp  Frank Conijn s answers

User · Answer

Debounce actually a great idea  Here version for jQuery free projects   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       gt            window location   this logoutUrl         sessionTimeoutInMinutes   60   1000

User · Answer

Here is a simple script using JQuery that handles mousemove and keypress events  If the time expires  the page reload    lt script type  text javascript  gt  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  gt  19       20 minutes         window location reload             lt  script gt

User · Answer

Based on the inputs provided by  equiman class  Scheduler       timeoutIDs       constructor             this timeoutIDs   new Map               addCallback    callback  timeLapseMS  autoRemove    gt            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    gt            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   gt                document addEventListener name  this resetTimer  true                        this callbacks   new Map               addIdleTimeCallback    callback  timeLapseMS    gt            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    gt            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        gt            for  let  timeLapseMS  callbacksArr  of this callbacks                callbacksArr forEach callback   gt                       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

User · Answer

Try this code  it works perfectly   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  gt   IDLE TIMEOUT            alert  Time expired             document location href    SessionExpired aspx

User · Answer

Here is a rough jQuery implementation of tvanfosson s idea     document  ready function        idleTime   0        Increment the idle time counter every second     var idleInterval   setInterval timerIncrement  1000       function timerIncrement             idleTime         if  idleTime  gt  2                doPreload                      Zero the idle timer on mouse movement       this  mousemove function e         idleTime   0             function doPreload               Preload images  etc

[javascript] How to detect idle time in JavaScript elegantly?

Examples related to javascript