Detect inactivity in JS

JavaScript
1

I implemented script where every x minutes API will be called to show few pieces of data on the small dashboard.
I want to improve it a bit in a way to NOT query the API if user minimized the browser, tab not active, mouse not moving etc. In short if there is no activity detected in the particular tab dont send the request.

Any suggestion on best way to do this?

2

Document: hasFocus() method - Web APIs | MDN (mozilla.org) will get you most of the way, I suppose.

If a user wants to put your site on a second monitor and just leave it running, you dont want them to get the data?

3

Honestly not sure. Any advice would be great. I mean if they not engaged with the page after X many minutes stop querying. if they have page on another page and reading yes then get the data but I do want to stop getting data if there is no activity. hope that make sense.

4

But if i set your site on another monitor and just have it there, the document sees no activity. Remember that Javascript in a webpage cant penetrate the barrier and observe things outside of the document. I could be clicking 1000 times a minute on the other window while your site is over there, but your site sees no activity.

5

I dont understand that. doesnt web page on another monitor have JS running as well?

6

It does. But what activity do you expect that JS to see?

If iā€™m clicking around in window B, window A does not know about it.

7

oh yes that make sense. I think it is ok if the user is on another window and no action detected than same would apply - stop querying.

Can you detect scrolling of the page?

8

Event reference | MDN (mozilla.org)

9

You could also do what YouTube does and ask if the user wants to continue watching (in their case) after they detect a period of inactivity.

10

This sounds a bit like debounce.

Not sure if this is close, but maybe an idea to work from.

window.addEventListener('DOMContentLoaded', () => {
  function afterInterval(callback, delay = 5000) {
    // set the initial timer
    let timer = setTimeout(callback, delay)

    const handler = () => {
      // cancel the previous timer
      clearTimeout(timer)
      // set a new one going
      timer = setTimeout(callback, delay)
    }

    // mousemove or click will cancel timer and trigger a new one
    window.addEventListener('mousemove', handler)
    window.addEventListener('click', handler)
  }

  afterInterval(() => alert('Do you want to continue?'))
})
11

Check into the Page Visibility API. You can use it to determine if the page is visible or not and pause or slow your script as necessary.

1 Like