Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I have recently created a HTML5 canvas animation (also using Processing.js).
The problem is that when I switch the browser to a different tab the animation stops playing.
How can I allow the animation to keep playing while the user is on a different tab than the one containing the animation?
Example:
http://jsfiddle.net/EyFTr/3/
If you switch tabs the clock stops, but if you open the link a new window and blur the window the clock will still move.
The short answer is you can’t.
https://developer.mozilla.org/en/DOM/window.setTimeout
Browsers in question are a bit old in that quote but its still relevant. This is by design. Its to reduce processor load when the tab isn’t active. (Processing.js uses
setTimeoutfor animations)Theres a few ways to “fix” this. They involve checking the time, and calculating where the object “should” be based on the time, once the tab becomes active. In your example however though it looks like your code will do that, since its a clock which is based the time anyway.