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

Answer 2

在脚本完成处理器的当前滴答之前，浏览器不会重新渲染屏幕。在给出任何视觉反馈之前，for循环使处理器唠叨完成其线程。

但请记住，在for-loop之前，JavaScript DOM 的实际属性已经 已更改在你的例子中，之后直接查询它会显示它已经是绿色。

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

console.log( $('.test').css("color") ); // rgb(0, 255, 0);

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

在大多数用例中，这是可以接受的，不应影响您的应用程序。

简化：并不是说你的元素对象没有设置为＆＃39;循环前的颜色;它的浏览器还没有直观地响应这种变化。

jQuery改变CSS优先级？

2 个答案: