CODEWITHSUNDEEP
jquerygoogle-chrometabs
bo-oz
bo-oz

Reputation: 2872

Is there an event in Javascript that fires when user changes tabs in browser

Let me start with the problem: Chrome behaves strange when using setTimeout() if the user changes browser tabs, the executing of the Javascript is halted/pauzed. After the user changes back, Chrome wants to catch up, so the animation isn't respecting the timneout and is animating out of control.

I'm trying to prevent Chrome from rushing the animation if the user comes back after a while. I've found in another question that jQuery offers a .blur & .focus event, but that doens't seem to work either:

$(window).blur(function() {
  clearTimeout(timer) 
})

Is there any way to stop the animation on the exact moment that the user changes the tabs, or is there no event that gets fired just after the user changes tabs?

Upvotes: 2

Views: 2275

Answers (3)

mmcnickle
mmcnickle

Reputation: 1607

In most modern browsers when a tab isn't in focus, timeout stop firing as often which is why you are seeing the animation being paused/jittering. This is intentional.

There is a great mozilla article that explains how to write some logic that will handle the animations when the tab isn't in focus. It even includes a small cross-browser library called animLoop.js to help you. The examples will also work in Chrome.

Upvotes: 3

antyrat
antyrat

Reputation: 27765

I dont know how to do that with jQuery, but in pure js you can do something like this:

<script>
function onBlur() {
    clearTimeout(timer);
};
if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.onfocusout = onBlur;
} else {
    window.onblur = onBlur;
}
</script>

Make sure that variable timer is in visible scope.

Upvotes: 0

bjornd
bjornd

Reputation: 22943

There is a Page Visibility API. Its main purpose is to notify page when user show/hide tab or window with the it. The API isn't completed, but works in several browsers including Chrome. You can read more about it in Nicholas Zakas' blog.

Upvotes: 0

Related Questions