1

私はこのようなループを持っています

for(i = 0; i < 50000; i++){
    $('body').append("<div>lol</div>');
}

Operaブラウザでは、画面にコンテンツ「lol」が「追加」されている要素divを確認できます。

しかし、Chrome、Firefox、IEなどでは、ループが終了したときにのみdivを表示できます

Js /Jqueryまたは他のクライアント側ソリューションまたはPOGを使用してOperaで動作するように強制する方法は？

4

2 に答える 2

6

まず第一に、これは本当に悪い習慣です。追加するたびに再レイアウトが強制され、ケーキのようにパフォーマンスが低下します。

つまり、ループを実行すると UI の更新が停止します。そのため、「非同期ループ」、つまりタイムアウト呼び出しを伴う自己参照関数を使用して、UI を更新できるようにします。

var i = 5000;
var countdown = function () {
    $("body").append("<div></div>");
    if (i > 0) {
        i--;
        window.setTimeout(countdown, 0);
    }
}
countdown();

編集：実際の関数呼び出しを追加しました。

于 2012-08-10T20:52:46.600 に答える
0

setTimeout で再帰関数を使用します。setTimeout を使用すると、ブラウザは DOM の更新の間に UI を更新できます。

function appendDiv(iteration, iterationLimit) {
   $('body').append('<div></div>');
   if(iteration <= iterationLimit) {
      window.setTimeout(appendDiv, 1, iteration + 1, iterationLimit);
   }
}
于 2012-08-10T20:55:40.153 に答える