JavaScript実行時にDOMを再描画する

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() 

が、UIは最後まで更新されませんので、背景が赤や緑に変わりはありません - それはちょうど青終わります。

関数の実行中に強制的に再描画する方法はありますか？

私はこれが良いアイデアではなく、実際の実装では許容されるものではないことを認識していますが、私の目的は、初心者にはコンパクトであるようにすることです。

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

関数color（）およびwait（）の代わりにsetTimeoutおよびstyle.backgroundColorを使用できます。

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; 
    } 

}