0

ブラウザがアクティブに実行されていることを知る方法はありrequestAnimationFrameますか?

たとえば、実行中のタブからタブを切り替えるrequestAnimationFrameと、関数の実行が停止し、元に戻すと続行します。これに対処する最善の方法は何ですか?

4

3 に答える 3

8

requestAnimationFrameが 100% 実行されているかどうかを検出するには、以下を確認できます。

window.addEventListener('blur', function() {
   //not running full
}, false);

と

window.addEventListener('focus', function() {
   //running optimal (if used)
}, false);

requestAnimationFrameこれは、ウィンドウ (タブ) がアクティブでない場合に (ほとんどのブラウザーで) トリガー率を下げることがわかっているので使用できます(使用されているIF - 実際に を使用しているコードに依存しますrequestAnimationFrame)。

常に実行したい場合は、次のようなメカニズムを挿入できます。

var isActiveTab = true; //update with the events above

function myLoop() {

    //my cool stuff here

    if (isActiveTab) {
         requestAnimationFrame(myLoop);
    } else {
         setTimeout(myLoop, 16); //force a rate (vblank sync not necessary
                                 //when display isn't updated
    }
}

requestAnimationFrame のレートの削減は標準の一部ではなく、ブラウザ固有の実装であることに注意してください。

于 2013-06-20T22:05:19.653 に答える
1

再びアニメーションでタブに戻ってきたとき、それは正常に動作しているに違いありません(その場合--以下があなたの答えです!!!)

これが RAF の目的です。パフォーマンスを最適化するためです。代わりに SetInterval と Settimeout を使用してアニメーションを作成できますが、これらはブラウザと対話できず、最終的に CPU を占有することになり、パフォーマンスも非常に遅くなります。

しかし、あなたの質問は実際には質問ではありません。これは実際に、全体的なアニメーション体験を向上させるために RAF が使用するトリックです。

RAF について説明している記事がいくつかあります。 http://creativejs.com/resources/requestanimationframe/

単なる最適化のトリック -- 心配する必要はありません

于 2013-06-20T16:42:57.870 に答える