javascript - jQuery 改变 CSS 优先级？

Question

在这个例子中:

<div class="test">Lorem Ipsum </div>
<div class="test">Lorem Ipsum </div>
<div class="test">Lorem Ipsum </div>

<button onclick="test();"> click</button>

function test()
{
    $('.test').css("color", "#0f0");

    for(i=0; i<=1000000000; i++)
    {

    }
}

https://jsfiddle.net/t741kz5a/2/

为什么循环在颜色改变之前运行？我怎样才能让它按顺序工作？

Answer 1

浏览器只会在不在函数中时更新。所以它只会在退出函数时更新。

您必须调用异步循环，因此您首先退出该函数然后它继续。

function test()
{
    $('.test').css("color", "#0f0");

    setTimeout(function(){
        for(i=0; i<=1000000000; i++)
        {

        }
    }, 1); // in some cases you might have to give it more then just 1 millisecond
}

force DOM redraw with javascript on demand