2

大量のデータを処理しているとしましょう。これには時間がかかります（私の場合、AJAXを介して複数のリソースにアクセスし、それらを受け取った後、RegExpで解析します[解析には非常に時間がかかります]） 。

また、2つのことを保証したいと思います。

  • ブラウザがフリーズしたと感じない
  • ユーザーはある種のインジケーターを持っています

jQuery（UI）を使用して次の例を作成しました。

JS：

  $(function() {
     $("#progressbar").progressbar({
        value: 0
     });
     $("#blub").click(function() {
        i = 0;
        while(i < 5000) {
           $("#progressbar").progressbar({
              value: (i / 5000 * 100)
           });
           i++;
        }  
     });
  });

HTML：

<div id="progressbar"></div>
<div id="blub">KLICK</div>

しばらくの間、ブラウザはキャンバスを再描画しているようです。また、CPU使用率は可能な限り高くなります。

強制的に中断したり、CPU負荷を軽減したりする方法はありますか？

4

1 に答える 1

4

パスごとに結果をレンダリングするrequestAnimationFrameには、ループの代わりに使用する必要があります。while

https://gist.github.com/1579671requestAnimatonFrameにフォールバックするポリフィルは次のとおりです。setTimeout

whileそして、計算が完了するまで画面の更新やレンダリングを許可しないループを置き換える方法を次に示します。

var i = 0;
animate();
function animate() {
    requestAnimationFrame(animate);
    $("#progressbar").progressbar({
         value: (i / 5000 * 100)
    });
    i++;
}
于 2012-10-02T16:08:23.433 に答える