javascript - Javascript setinterval は、ウィンドウに戻ったときにすべて再生します

Question

setInterval 関数に適用される関数があります。フォーカスされたウィンドウを最小化または変更し、Web サイトを表示しているブラウザーに戻ると、ブラウザーは、フォーカスを別のウィンドウに変更した後に発生したすべてを非常に高速に再生します。

ウィンドウのフォーカスのウィンドウが変更されたときにアニメーションを保持し、間隔を設定する方法はありますか?

ありがとう。

Answer 1

この投稿を見つけました: JavaScript / jQuery: ウィンドウにフォーカスがあるかどうかをテストする

私にとっては、Google chrome で動作しましたが、一部のブラウザーでは動作しない可能性があります。

テストするフィドルは次のとおりです。

http://jsfiddle.net/ScKbk/

彼の答え：

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);
});​

Answer 2

Getu.ch の回答によく似ていますが、ウィンドウにフォーカスがある場合 (3 秒ごとに実行) にのみ「作業」コードが実行されます。すべてのブラウザーでテストされているわけではありませんが、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);

});

Answer 3

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());