Chrome repaint DOM во время выполнения JavaScript

Question

Я создаю курс для людей, которые никогда не программировали, и хотели бы продемонстрировать базовые манипуляции с DOM без использования асинхронных программ или функций обратного вызова.

Я думал, что я мог бы сделать что-то вроде этого:

function color(element, color) { 
    element.style = "background: " + color + ";"; 
} 

function wait(milliseconds) 
{ 
    var e = new Date().getTime() + (milliseconds); 
    while (new Date().getTime() <= e) {} 
} 

function disco() { 
    var body = document.getElementById("body") 
    color(body, "red") 
    wait(500) 
    color(body, "darkGreen") 
    wait(500) 
    color(body, "darkBlue") 
} 

disco() 

Это прекрасно работает, но интерфейс не не обновляется до конца, так что фон не станет красным или зеленым - это просто заканчивается синим.

Есть ли способ принудительно перекрасить во время выполнения функции?

Я знаю, что это не очень хорошая идея или даже приемлемая для реальной реализации, но моя цель - держать вещи в руках для новичков.

Answer 1

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

var body = document.body; 
var colors = [ "red", "darkgreen", "darkblue" ]; 
var nextColor = 0; 

function color(element, color) { 
    element.style = "background: " + color + ";"; 
} 

function setNextColor() { 
    color(document.body, colors[nextColor%color.length]; 
    nextColor = nextColor + 1; 
} 

function disco() { 
    setInterval(setNextColor, 500);   
} 

Обратите внимание, что этот код предназначен только для демонстрации техники, а не для тестирования.

Answer 2

Вы можете использовать setTimeout и style.backgroundColor вместо функций color() и wait(). Я предлагаю эту функцию дискотеку:

function disco(){ 

    var body = document.getElementById("body"); 

    time = 0; 

    for (var i=0;i<10;i++) // I've put this color to change 10 times, just for test. 
    { 
     setTimeout(function(){ body.style.backgroundColor = "red"}, time); 
     time += 100; 
     setTimeout(function(){ body.style.backgroundColor = "darkGreen"}, time); 
     time += 100; 
     setTimeout(function(){ body.style.backgroundColor = "darkBlue" }, time); 
     time += 100; 
    } 

}