0

このコードで、while ループが終了するまで CSS の変更が完了しないのはなぜですか? ループによってブラウザーがハングすることはわかっていますが、css の変更は同期的であるため、while ループが開始される前に終了すると考えていました。

おまけの質問: JavaScript スレッドの制御を放棄することなく、while ループに移動する前にその CSS の変更を完了する方法はありますか?

function run() {
    var then = +new Date()
        , now
        ;

    $('#mydiv').css('display','block');

    now = + new Date();
    while (now - then < 5000) {
        now = +new Date();
    }
}

フィドル: http://jsfiddle.net/ezVZT/2/

4

3 に答える 3

2

ブラウザーは常にページをすぐに更新するとは限りません。多くの場合、スクリプトが実行され、すべての再描画がまとめてバッチ処理されている間、レンダリングされたが描画されていない更新で待機します。

あなたのコードでは、スタイリングに変更を適用していますが、すべてをブロックする 5 秒間のループを実行しています。CSS の変更は待つだけです。

何かを行う前に 5 秒間待機する必要がある場合は、setTimeout() 呼び出しを使用するか、jQuery を使用しているため、.delay().

于 2013-09-14T04:52:59.843 に答える
0

次のコードを試してください。それはうまくいくかもしれません。

function run() {
    var then = +new Date()
        , now
        ;

    $('#mydiv').css('display','block');
    $("#mydiv", window.parent.document).load($("mydiv").html());

    now = + new Date();
    while (now - then < 5000) {
        now = +new Date();
    }
}

function reset() {
    $('#mydiv').css('display','none');
}
于 2013-09-14T05:19:07.200 に答える
0

$elem.addClass('xyz') のようなものがあなたの問題を解決しますか? その後、css で display: ブロックをクラスに割り当てることができます。多分それはより速いでしょうか？

于 2013-09-14T05:04:00.100 に答える