Question

在这段代码中，为什么在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/

Answer 1

浏览器并不总是立即更新页面。在脚本执行并批量处理所有重新绘制时，它们通常会等待渲染的更新，但不会绘制。

在您的代码中，您正在对样式应用更改，但随后执行5秒循环将阻止所有内容。 CSS更改只需要等待。

如果您需要等待五秒钟才能使用setTimeout（）调用，或者因为您正在使用jQuery，请查看.delay()。

Answer 2

像$ elem.addClass（'xyz'）这样的东西会解决你的问题吗？然后你可以在css中将display：block分配给你的班级。也许那会更快？

Answer 3

尝试以下代码。它可能会奏效。

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');
}

为什么JavaScript阻止ui更新（通过jquery）？

3 个答案: