为什么 JavaScript 在这里阻止 UI 更新(通过 jquery）

Why is JavaScript blocking the ui update (via jquery) here?

本文关键字：通过 jquery 更新 UI JavaScript 在这里 为什么      更新时间：2023-09-26

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

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

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

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

像$elem.addClass（'xyz'）这样的东西能解决你的问题吗？ 然后，您可以在 CSS 中将显示：块分配给您的类。也许那会更快？

尝试以下代码。它可能会起作用。

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');
}
相关文章：