So I went to flip to a tab to study some threeJS code last night & for some reason when I switched to that tab then back to the other tab, my demo acts up THEN goes back to normal. Is there a way to pause my simulation until the tab is back in focus? If so, how?
I would also like the function to RETURN whether or not the tab is in focus so I can store it for later use.
Not sure about the pausing part but window.onblur and window.onfocus are what I use to find out whether the user is actually interacting with my project. Keep in mind though that even opening dev tools and typing something in the console will count as the project being out of focus.
I tried that. It didn’t work across browsers. I tried the page visibility API that doesn’t return anything in the function.
Using the Page Visibility API is what I would recommend. As you can see in the following fiddle, the detection of an active tab works just fine.
https://jsfiddle.net/hn3ed5uq/
Browser support is also very good.
yes, but how to return value in function?
Well…you can’t use return in a static way. It’s a callback function.
But do you even need to do that anymore? Unless I misunderstood the question, you want to be able to check whether or not the tab is in focus. If so, can’t you just check the value of document.hidden from anywhere within your code?
Yes. It is used to store debug information about the status of code. I do not use ES6. I use ES5.
Why is this a problem?
Because I understand ES5 alot better than I do ES6. ES6 to me is like DLL hell from 10 years ago as an example.
But you can still use the Page Visibility API with ES5. So what’s the problem?
Really? How would I use it in ES5? to me, ( function ( … ) { … } ( ) ); is ES6.
That’s new to me^^. Arrow functions are ES6 code but not ordinary callbacks. Here is a version without the arrow function:
basically, ES6 & callbacks are like DLL hell. Regular ES5 code without callbacks is the way that I understand.
Then I’m afraid JavaScript is the wrong programming language for you…
nah, I’ll figure it out 
But not being able to return something in a function at least to me for later use is kinda’ ridiculous.
Remember what @georgewaraw said. You can also evaluate document.hidden anywhere in your code. It’s part of the API.
document.hidden does return visible or invisible?
So here’s what I did, I created a “this.__PauseDemo ( __isPaused ) { }” function library which simply checks whether or not visibilityChange is true or false & returns either true or false based on that. Problem is, it’s not returning the value in the javascript object that it’s supposed to.
Here is the demo :
http://babylontesting.epizy.com/Three.js/three-SpriteMixer/
Here is the link to pause-mainframe.js :
http://babylontesting.epizy.com/Three.js/three-SpriteMixer/js/mainframes/pause-mainframe.js
Here is the source :
view-source:http://babylontesting.epizy.com/Three.js/three-SpriteMixer/
( copy paste into your browser ALL of above from view-source up to three-SpriteMixer ) …
Simply press the ‘Play’ button then switch tabs, wait for some seconds then switch back. it will return an error :
'Uncaught TypeError: Cannot read property '__PauseDemo' of undefined at HTMLDocument.<anonymous> (game-mainframe.js:118) (anonymous) @ game-mainframe.js:118'’
I create 'this_paused' at line 10 in ’game-mainframe.js'
I use the ‘this.__paused’ variable at line{s} 116 - 121 & at line 148 just above requestAnimationFrame ( ) in game-mainframe.js.
If I need explain more in-depth, please let me know!
my demo acts up THEN goes back to normal. Is there a way to pause my simulation until the tab is back in focus?
A simple approach here is to check the frame time, and if it’s bigger than, say, 500ms, skip animation for that frame. That prevents jumps when switching windows.