Jump to content

Remaining the same speed when switch to another tab


Recommended Posts

Hi guys,

Recently I intend to keep my game running at the approximately same speed while the player switch to another tab,

it means I need to keep my movieClip(animatedSprite) and Tween object(I am using GreenSock) running while losing tab focus,

since RAF will stop, I use setInterval to keep updating PIXI.ticker.shared.

const ticker = PIXI.ticker.shared;
setInterval(() => {
}, 20);

However, setInterval's minimum is limited to around 1000ms when the tab focus is blur, so my movieClip‘s update rate is the same, which is much slower.

Now, i am thinking to record the deltatime and set the movieClip to specific frame accordingly on each update, then have to deal with the callback like onRepeat or onComplete,

Is there a simpler way to achieve this?

Link to comment
Share on other sites

hi ivan.popelyshev,

Sorry I didn't make my question very clear,

what I want is movieClip keep playing when I switch to another tab,

since RAF stop when I lose the tab focus, I use setInterval continuously update ticker to keep movieClip playing,

I hope it updates every 20ms, however, seems like while I lose the tab focus, the setInterval ignore my 20,

It only do it every 1000ms, I believe it's browser's feature to save performance.

so ticker.update is called every second only, which makes the movieClip only change it's frame every second as well. 




Link to comment
Share on other sites

  • 2 years later...

Hello, @ivan.popelyshev and @Herbert sorry for the necro but this looks to be exactly the issue I'm trying to tackle here in 2019.

I'm working on a multiplayer game so it is important that my game state (physics calculations) stay in sync with the server.

When the tab loses focus, it is my understanding that:

  1. RAF (which is what the Ticker uses) pauses.
  2. setInterval() is limited to 1000ms intervals.

So my approach is to use a setInterval() instead of ticker.add() when window is blur and adjust as necessary (using deltaMS from the ticker):

let manualUpdateInterval;

window.onblur = () => {

	ticker.stop();                             // stop the ticker so we can manually update
	ticker.minFPS = 1;                         // correspond to the setInterval limit (1000ms)

	manualUpdateInterval = setInterval(() => {
	}, 1000);                                  // capped at this value anyway

window.onfocus = () => {

	clearInterval(manualUpdateInterval);      // stop the interval
	ticker.minFPS = 10;                       // reset to default minFPS
	ticker.start();                           // start the ticker back up


if (ticker.started) {

	ticker.add(() => {

		update(ticker.deltaMS);           // send deltaMS so physics calculations stay in sync


When the tab is focus, everything looks right. However when the tab loses focus, my physics calc seems off (I can monitor this by seeing the server update player location in it's logs)... When I switch back to the tab, player is behind.

Is there something I'm missing here? Any help is appreciated.

Link to comment
Share on other sites


Ticker is not a ideal theoretical thing, its a class that has downsides and hacks: we can say that "it works" only if that really works for particular case. If it doesnt work for yours - well, find whats wrong and fix it. There're no guarantees.

Not so long ago @themoonrat and someone else tried to fix that for different reason - minFPS/maxFPS props weren't working properly. I didnt even try to understand what did the guys fix.

Link to comment
Share on other sites

Check out mainloop.js, there's a neat write up on it and constructing better main loops for javascript.  Even has frame interpolation, if that would suit you.  Also has some ways of dealing with lost focus and trimming delta time based on being tabbed out.

setInterval for a gameloop is not ideal.  Either case tabs and lost focus are part of our life in the html5 scene, so it's just coping with it best you can, there is no fix; only mitigation

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...