1

私がまとめた次の例で何が起こっているかの背後にある解決策、または単に「ボンネットの下」の理論さえ探しています。

DOM の操作はノンブロッキング方式で行われているようです。つまり、DOM ステートメントの実行を待機するフロー制御はありません。

この例では: http://jsfiddle.net/qHVJX/

onclick イベントの後に 2 つのステートメントが実行されます。

  1. テキストを左から右にシフト

    document.getElementById('text').className = 'tr';

  2. 実行を停止するために一連の時間をループします。

    for(var i = 0,temp=1000000000; i<temp;i++){var dummy=0;}

各ステートメントの実行中にフロー制御がブロックされた場合、予想どおり、テキストは左から右にシフトし、ループからの短い一時停止が続きます。代わりに、ループの反復後にテキスト シフトが発生します。

これは、ループが優先的に実行される間、className ステートメントがキューに入れられることを示唆しています。

この例では: http://jsfiddle.net/qHVJX/1/

onclick イベントの後に 3 つのステートメントが実行されます。

  1. テキストを左から右にシフト

    document.getElementById('text').className = 'tr';

  2. 実行を停止するために一連の時間をループします。

    for(var i = 0,temp=1000000000; i<temp;i++){var dummy=0;}

  3. テキストを右から左にシフトします。

    document.getElementById('text').className = 'tl';

繰り返しになりますが、各ステートメントの実行中にフロー制御がブロックされた場合、予想どおり、テキストは左から右にシフトし、ループが繰り返される間に短い一時停止が続き、その後テキストが右から左にシフトします。

代わりに、ループが実行され、テキストが左から右、右から左に再描画されることはありません。これは競合状態を示しています。

ただし、setTimeout() は、DOM ステートメントが処理を実行し、キューに入れられるのを回避するのに十分な時間、実行を停止することができます。各ステートメントにかかる時間を知る方法はありません。間隔が短く設定されていると、目的の結果が得られません。間隔を必要以上に長く設定すると、パフォーマンスが低下します。

setTimeout() のオーバーヘッドなしで DOM 操作中に実行をブロックする方法はありますか? おそらくある種のコールバックルーチン？

どんな洞察も大歓迎です。ありがとう。

4

3 に答える 3