ReactでsetTimeoutsの描画キャンバスを制御する

Question

React.jsを使って私の古いSimonゲームをHTML5 Canvasにリファクタリングしています。現在、私はデモライトシーケンスを制御する方法を考え出すのに苦労しています。それは同時にすべてのライトを演奏し続けた。私は 'drawcircle'と呼んだときにキャンバスを再描画します。フルコードビューについては、CodePenにありますhttps://codepen.io/pkshreeman/pen/ZyLEoB?editors=0110 [電源]ボタンをクリックして、数サイクル再生すると、私の話題が表示されます。場合

function demoLight(current,i){ 
setTimeout(() => drawcircle(current.matchMe[i],current.matchMe[i]), 500); 
setTimeout(()=> {console.log('timeout .5 sec')}, 500); 
setTimeout(() => drawcircle(current.matchMe[i], current[current.matchMe[i]]), 800); 
setTimeout(()=> {'timeout part 2 0.5 sec'}, 500); 
} 
//demo function 
function demoMatch(current){ //enter this.state as current 
    console.log('demo on the level of '+ current.level) 
    for(let i = 0 ; i < current.level; i++){ 
    setTimeout(()=>{demoLight(current,i)}),2200 
    } 
} 

あなたはdrawcircle関数を参照してくださいする必要があります。

function drawcircle(id, color) { 
    var context = document.getElementById(id).getContext("2d"); 
    var x = 75; 
    var y = 75; 

    switch (id) { 
    case 'purple': 
     x = -10; 
     y = -10; 
     break; 

    case 'pink': 
     x = 160; 
     y = -10; 
     break; 

    case 'blue': 
     x = -10; 
     y = 160; 
     break; 

    case 'green': 
     x = 160; 
     y = 160; 
     break; 
    } 
    context.beginPath(); 
    context.arc(x, y, 115, 0 * Math.PI, 2 * Math.PI, true); 
    context.strokeStyle = color; 
    context.lineWidth = 85; 
    context.stroke(); 
} 

Answer 1

setTimeoutsを使用すると、複数のsetTimeoutをトリガーする場合は、ループの中でやったようなので、重複setTimeoutsが発生する可能性があります、非同期操作を防ぐことはできません。

私は、コードへの変更は、この質問での回答に基づいていた：how to control for-loop exection in javascript [what should this javascript code do] ...

function demoMatch(current){ //enter this.state as current 
    console.log('demo on the level of '+ current.level) 
    //for(let i = 0 ; i < current.level; i++){ 
    let i = 0; 
    let intervalHandler = setInterval(function() { 
     demoLight(current,i) 
     if(i === current.level - 1) { 
      clearInterval(intervalHandler); 
      return; 
     } 
     i++; 
    }, 1000); 
}