5

Currently my website keep auto reload a javascript function for every 10 seconds by setInterval( "checklatestmsgidLive();", 10000 ); I think the function will still keep reloading the function even when the user is viewing other website on other tab. How to make it reload the function only when the user is viewing my website? Can javascript detect if the user is viewing my website?

I saw facebook.com wall also update new posts only when I am viewing the page, when I am on other tab, it won't update the new posts. How to do that?

zac1987
  • 2,721
  • 9
  • 45
  • 61
  • possible duplicate of [Is there a way to detect if a browser window is not currently active?](http://stackoverflow.com/questions/1060008/is-there-a-way-to-detect-if-a-browser-window-is-not-currently-active) – Lazarus Jun 10 '11 at 14:59
  • 1
    arrrr.. sorry about it. I feel guilty (T_T). – zac1987 Jun 10 '11 at 15:32
  • 1
    Don't feel guilty, it could happen to anyone. I am impressed that no-one else cared and some people got the opportunity to gain some rep from answering it again. I love SO sometimes... sometimes not. – Lazarus Jun 13 '11 at 14:45

3 Answers3

8
var tId, idleTimer;
function initReload() { 
  clearInterval(tId);
  tId = setInterval(checklatestmsgidLive, 10000 );

}
window.onload=window.onfocus=function() {
  initReload()
}
window.onblur=function() {
  clearInterval(tId);
}
window.onmousemove=function() {
  clearTimeout(idleTimer);
  idleTimer = setTimeout(function() { clearInterval(tId);},600000); // idle for 10 minutes
}
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • I see. So I just need window.onblur. Thank you very much. May I know why you put clearInterval(tId); inside function initReload(), I guess if you don't put it, the effect still the same (setInterval will start from 0th second). – zac1987 Jun 10 '11 at 15:39
  • I put it in case you reload onfocus. It is just defensive but not really needed. – mplungjan Jun 10 '11 at 16:28
  • @Zac I added a mousemove as suggested by Chris – mplungjan Jun 10 '11 at 16:44
  • I have implement your codes into my website successfully. Very big big thanks to you. In case anyone have problem about window.onblur on IE, here is the solution http://2aek.com/inventory/detectActiveWindow.html :) – zac1987 Jun 10 '11 at 23:21
  • Looks good. I see the codes are mostly from the duplicate question. I still want to know the weird IE hack they have used – mplungjan Jun 11 '11 at 05:45
8

Mouse move doesn't work very well on touch devices without a mouse, but we don't have a lot of options yet. W3C is working on a new API: Page Visibility. It's still in a very early stage, and the only browsers I could find that have started implementing it are Google Chrome (Dev Channel) and Internet Explorer 10 Platform Preview.

Since the spec is still a draft, the properties and events are vendor prefixed. But it still works, and Chrome has an extremely quick update rate. So I would try to detect if Page Visibility is available, and if not fallback to the mouse move hack.

The IE-team has a live demo that works in Chrome Dev and IE 10 platform preview.

gregers
  • 12,523
  • 8
  • 46
  • 41
5

An easy solution would be to detect a mouse move in your page.

  • I think this is also how gmail switches your chat status from away to online / busy when you weren't having your gmail tab active for a while. – TweeZz Jun 10 '11 at 15:10
  • Thank you. Seriously I hate facebook way. It is so annoying when I try to point something to click, the "something" will move away. I don't want to use mouse detecting way. I am going to use window.onblur way. May I know why Facebook doesn't use window.onblur? It should be better than mouse detect... :) – zac1987 Jun 10 '11 at 15:42
  • @zac1987 Understandable... I personally think it is a neat effect. If I'm not mistaken, the window.onblur event won't occur if the user perhaps leaves the page in focus but idle. But I don't know for sure. –  Jun 10 '11 at 15:52
  • i see. Wow, I never thought of that. FB is clever :) – zac1987 Jun 10 '11 at 16:21
  • What if I only switch between tabs and not to bring mouse on the page? its not the correct answer. it will be also problematic in mobile devices. – DragonKnight May 14 '17 at 01:25