3

I'm developing a little roulette game.

My question is, the roulette animation used with transform & transition, works pretty well when I'm in the actual tab.

The problem is, when i move to another tab or miniminize, before the roullete starts, until i dont get back to the tab, it dosnt start scrolling / moving.

Is like the roullete animation is waiting until i get to the tab again, to start moving.

$(this.refs.slider).css(*transform', 'translate3d(-7' + DB.rouletteSpin + 'px, 0px, 0px)');
$(this.refs.slider).css('transition', '15000ms cubic-bezier(0.32, 0.64, 0.45, 1)');

That's the code, and i think the problem it could be cause im using this in a setInterval?

The DB.roulleteSpin is just a simple code that comes from the Database.

How I could approach this situation? I will like to know the roulette starts moving and ends in the right place, no matters if I'm in the tab or not.

I should use some animation library, like TweenMax or something?

Someone know how to solve this? Sorry if i dont explained it properly, you can ask me if u guys didnt understand something.. Thanks!

DjaouadNM
  • 22,013
  • 4
  • 33
  • 55
  • Browsers can throttle or pause setInterval events when the tab is inactive. Maybe these questions might help you: https://stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome and https://stackoverflow.com/questions/6032429/chrome-timeouts-interval-suspended-in-background-tabs – Eren Tantekin Aug 12 '17 at 15:10
  • Its a limitation of javascipt that setinterval get paused when ou minimise the tab or move on to another tab. – amit wadhwani Aug 12 '17 at 15:13
  • @amitwadhwani yeah i noticed it, and that's the problem. Do you know how can i aproach this sitaution and solve it? –  Aug 12 '17 at 15:17
  • when i faced this, i have used system time to calculate the delta. – amit wadhwani Aug 12 '17 at 15:25

0 Answers0