javascript - 为什么 JavaScript 在这里阻止 ui 更新（通过 jquery）？

Question

在这段代码中，为什么 css 更改直到 while 循环完成才完成？我知道一个循环会挂起浏览器，但我会认为 css 更改将是同步的，因此在 while 循环甚至开始之前完成。

奖励问题：有什么方法可以让我在移动到 while 循环之前完成 css 更改而不放弃对 javascript 线程的控制？

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 更改只需要等待。

如果您需要等待 5 秒钟才能执行某项操作，请使用 setTimeout() 调用，或者由于您使用的是 jQuery，请查看.delay().

Answer 2

像 $elem.addClass('xyz') 这样的东西会解决你的问题吗？然后，您可以在 css 中将 display: 块分配给您的班级。也许这样会更快？

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