Javascript setinterval playing all when i get back to window

Question

I have a function applied to setInterval function. When I minimize or change the focused window, then get back to the browser showing my web site, the browser plays everything that happened since i changed the focus to another window, in a very fast manner.

Is there a way to hold the animations, setintervals when window of focus in windows change ?

Thanks.

score 0 · Answer 1 · edited May 23 '17 at 10:32

I found this post: JavaScript / jQuery: Test if window has focus

for me it worked on google chrome but it could be that it doesn't work in some browsers.

Here is a fiddle to test:

http://jsfiddle.net/ScKbk/

His answer:

var window_focus;

$(window).focus(function() {
    window_focus = true;
})

.blur(function() {
    window_focus = false;
});

$(document).one('click',function() {
   setInterval(function() { $('body').append('has focus? ' + window_focus + '<br>'); }, 1000);
});

score 0 · Answer 2 · answered Oct 03 '13 at 08:53

Try this.

    var handeler;
    function ShowAnimation()
{
    //SetInterval code
    handeler = SetInterval(myfunction, 1000);
}



//clear the handler when not in use.
function Clearhandler()
{
 ClearTimeout(handeler);
}



 //call the above method on the onblur event of window.
  $(window).focus(ShowAnimation(),Clearhandler());

score 0 · Answer 3 · answered Oct 03 '13 at 09:08

Much like Getu.ch answer except this will only execute your "work" code if the window has focus (runs every 3 seconds). Not tested in all browsers but here is a link showing browser compatibility of window.focus / window.blur

 (function($) {

     var windowHasFocus = false;

     $(window).focus(function() {
        windowHasFocus = true;
     });

     $(window).blur(function () {
        windowHasFocus = false;
     });

     setInterval(function() { 
         if(windowHasFocus) {
            //Do your work
         }
     }, 3000);

});

Javascript setinterval playing all when i get back to window

3 Answers3