Check if a user is actively viewing a webpage

Question

I have a webpage that updates itself in AJAX every 5 seconds or so by fetching data from a server. I would like to, however, only perform the update when the user is actively viewing the page.

When the user is on another tab, in another program other than the browser, or any other time the page is not the main active page on the user's PC, the update should not take place.

What would be the most accurate, cross-browser way to test this?

Answer 1

The jQuery idleTimer plugin should do exactly what you need.

Docs are here: http://paulirish.com/2009/jquery-idletimer-plugin/

Demo is here: http://ajaxdump.com/?8ADKBT6O

Answer 2

Best to use the Page Visibility API: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API