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

Answer 2

браузер не будет повторно вынести на экран, пока скрипт не закончит с текущим такте процессора. Процессор затягивает процессор, чтобы завершить его поток, прежде чем давать визуальную обратную связь.

Но помнить, что фактическое свойство JavaScript DOM имеет был изменен до проведения для петли в вашем примере, так запрашивая у него сразу после этого будет показывать быть зеленым уже.

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

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

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

В большинстве случаев использования это приемлемо и не должно влиять на ваше приложение.

Чтобы упростить: это не значит, что ваш элемент-объект не установлен в его цвет перед циклом; это то, что браузер еще не ответил на это изменение визуально.