jQuery更改CSS优先级？

问题描述：

<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/

为什么颜色前的循环运行发生变化？我怎样才能使它顺序工作？

答

只有当不在功能中时，浏览器才会更新。所以它只会在退出函数时更新。

你将不得不调用循环异步，所以你先退出函数，然后继续。直到脚本已与处理器的当前剔完

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

好吧，那么如何在此函数中调用之前更新CSS？ – user2971916

您必须将其称为异步，请参阅编辑 – CoderPi

答案接受？ – CoderPi

答

浏览器不会重新呈现在屏幕上。 For-Loop在给出任何视觉反馈之前唠叨处理器完成其线程。

但记住的JavaScript的DOM 实际酒店被之前改变for循环在你的榜样，所以查询它直接之后将显示它是绿色的了。

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

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

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

在大多数使用情况下，这是可以接受的，不应该影响您的应用程序。

为了简化：这不是说你的元素对象在循环之前没有被设置为它的'颜色;这是浏览器尚未对这种变化做出直观回应。

jQuery更改CSS优先级？

相关推荐