6

最近、HTML5キャンバスアニメーションを作成しました（これもProcessing.jsを使用しています）。

問題は、ブラウザを別のタブに切り替えると、アニメーションの再生が停止することです。

ユーザーがアニメーションを含むタブとは異なるタブを使用しているときに、アニメーションを再生し続けるにはどうすればよいですか？

例： http： //jsfiddle.net/EyFTr/3/

タブを切り替えると時計は止まりますが、リンクを開いて新しいウィンドウを開いてウィンドウをぼかすと、時計は動き続けます。

4

3 に答える 3

4

短い答えは、あなたができないということです。

https://developer.mozilla.org/en/DOM/window.setTimeout

(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) および Chrome 11 では、非アクティブなタブで 1 秒あたり 1 回 (1000 ミリ秒) の頻度でタイムアウトが発生するようにクランプされます。Mozilla の詳細についてはバグ 633421 を、Chrome の詳細については crbug.com/66078 を参照してください。

問題のブラウザーは、その引用では少し古いですが、それでも関連性があります。これは仕様によるものです。タブがアクティブでないときのプロセッサの負荷を軽減します。(Processing.js はsetTimeoutアニメーションに使用されます)

これを「修正」する方法はいくつかあります。タブがアクティブになると、時間を確認し、時間に基づいてオブジェクトが「あるべき」場所を計算します。ただし、あなたの例では、とにかく時間に基づいた時計であるため、コードがそれを行うように見えます。

于 2012-06-20T15:37:35.380 に答える
3

Loktar が示唆したように、この症状は、時間を確認し、自分がどこにいるべきかを把握することで軽減できます. これを行うことができる関数は次のとおりです。

function smartInterval(func, interval){
    var last = new Date() - interval,
        now,
        numMissed;

    (function iterate(){
        func();

        // compute the number of iterations you might have missed
        // if you tabbed away and the interval was restricted to 1000ms
        now = +new Date();
        numMissed = Math.round((now - last) / interval) - 1;

        // make up for those iterations that were lost
        while (numMissed--) { func(); }

        last = +new Date();
        setTimeout(iterate, interval);
    })();
}

使用法：

smartInterval(function(){console.log('hi');}, 100);

例を含む jsFiddle を次に示します。whileループ ( )をコメントアウトしてwhile (numMissed--)、タブに切り替えると数値が少なくなることを確認してください。whileただし、そこにループがあると、間隔がまったく変わっていないように見えます。

残念ながら、Processing.js を使用しており、タイムアウトは内部で設定されているため、これは役に立たない可能性があります。

于 2012-06-20T17:21:35.540 に答える
1

setInterval not working on Chromeを参照してください。基本的に、ブラウザはパフォーマンスを向上させるためにバックグラウンドで setInterval をいじるので、何が起こるかを正確に制御することはできません。

于 2012-06-20T15:38:46.943 に答える