4

リフローを呼び出すことになっているすべてを試しましたが、それは起こりません。テスト関数を10回呼び出して、画面に要素を描画し、その要素を反復ごとに移動します。そのループはすぐに実行され、最終的には画面上の要素の動きを見る代わりに1つの画像を取得します。

すべての作業が完了すると、画面上のリフローと描画が呼び出されるようになります。しかし、私はそれぞれの絵を見たいです。

私が試したすべてのことは何の結果ももたらさなかった。動作するのはalert（）だけですが、ユーザーとの対話は必要ありません。

それが助けになるなら、私はWebkit1.2.5を使用しています。

私が十分に理解できないならば、私はよりよく説明しようとします。

これは私がリフローを強制しているコードです

 var i = 0;
 for(;i<500;i+=50){
fTestInfo(i);
console.log("Test loop!!! "+i);
 }

私が必要としているのは、fTestInfo（i）が実行されるたびに画面に画像が表示されることですが、代わりに、最終結果しか表示されません。

fTestInfoはiに依存し、iの値だけ左に移動します。

4

2 に答える 2

1

forループを使用しているようです。これは通常、タイマーの動作を誤解していることを意味します。forループは同期的に実行され、おそらくすべてのタイマーを一度に設定しています。

これを試して：

(function loop(i) {
    if (i >= 500) {
        return;
    }
    document.querySelector("div").style.left = i + "px";
    setTimeout(function() {
        loop(i + 1);
    }, 16);
})(0);

デモhttp://jsfiddle.net/UCfmF/

私はあなたが次のような値を取得することを意味すると思います.offsetWidthか？これにより、画面にリフローが表示されるとは限りません。リフローをトリガーするアクションを実行している場合でも、ブラウザはしばらく待ってから（javascriptの実行が停止するまで）実際に画面に何かをペイントしようとする場合があります。

つまり、ドキュメントに1000個の要素を追加しても、1000回のリフローはトリガーされません。.offsetWidth各反復の間にフェッチした場合でも。それはあなたのために計算されるだけですが、必ずしも描かれているわけではありません。

javascriptの実行は、ブラウザがキューに入れられたリフローをフラッシュするときに終了するため、タイマーを使用して要素を移動する必要があります。

http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflowを参照してください

前述のように、ブラウザはいくつかの変更をキャッシュし、それらの変更がすべて行われたときに1回だけリフローする場合があります。ただし、要素の測定を行うと、要素が強制的にリフローされるため、測定が正しく行われることに注意してください。変更は目に見えて再描画される場合とされない場合がありますが、リフロー自体はバックグラウンドで実行する必要があります。

于 2012-08-03T16:28:25.100 に答える
0

各反復の間にイベントループに入る機会をブラウザに与える必要があります。

setTimeout図面の各反復をスケジュールするために使用します。

function scheduledTestInfo(i) {
    setTimeout(function() {
        fTestInfo(i);
    }, i);  // calls each function 50ms apart
}

var i = 0;
for ( ; i < 500 ; i += 50) {
    scheduledTestInfo(i);
}
于 2012-08-06T08:59:05.953 に答える