for 루프 내에서 여러 setTimeout 호출

Question

나는 HTML/JS로 게임 Simon을 코딩하려고합니다. 게임이 시퀀스를 깜박이는 부분을 제외하고는 새로운 시퀀스가 ​​무엇인지 알기 때문에 모든 것이 작동합니다. 기본적으로 내가 가지고있는 것은 : colorON 및 colorOFF는

for(var i in thePattern){ 
    var obj = document.getElementById(thePattern[i]); 
    window.setTimeout(colorON(obj),500); 
    window.setTimeout(colorOFF(obj),1000); 
} 

곳 : 그 다음 모든 타이머를 루프 전체를 통과하는 모든 타이머를 시작하고 일을 할 것 같다 무엇

function colorON(obj){ 
    if(obj.id == "red"){ 
     obj.style.backgroundColor="#ff5555"; 
    }else if(obj.id == "blue"){ 
    obj.style.backgroundColor="#5555ff"; 
    }else if(obj.id == "green"){ 
    obj.style.backgroundColor="#88ff88"; 
    }else{ 
    obj.style.backgroundColor="#ffffaa"; 
    } 
} 
function colorOFF(obj){ 
    if(obj.id == "red"){ 
     obj.style.backgroundColor="#ff0000"; 
    }else if(obj.id == "blue"){ 
     obj.style.backgroundColor="#0000ff"; 
    }else if(obj.id == "green"){ 
     obj.style.backgroundColor="#22ff22"; 
    }else{ 
     obj.style.backgroundColor="#ffff00"; 
    } 
} 

너무 빨리 떨어져서 색이 깜박 거리지 않는 것 같습니다.

아이디어가 있으십니까? 모든 도움은 대단히 감사하겠습니다.

---

이제 제대로 깜박이며 폐쇄가 올바르게 작동하지만 동시에 모든 색상이 깜박입니다. 그러나 나는 다른 클로저를 다른 setTimeout 안에 넣으려고했지만 다른 문제가 발생합니다.

---

당신의 도움들에 대한 감사를 해결했다.

Answer 1

당신은 setTimeout에 함수를 전달해야

window.setTimeout(function() { 
    colorON(obj); 
},500); 

지금 즉시 colorON(obj)를 호출하고 있고 setTimeout 즉시 발사되는 것처럼 보이게하는 setTimeout에 출력을 전달합니다.

obj은 또한 당신의 모든 기능을 실행할 시간에 의해, 그래서 obj이 당신의 루프에서 마지막 요소를 참조 할 참조에 의해 전달된다. 이 문제를 해결하려면 obj을 섀도 잉하여 값으로 전달해야합니다.

(function(obj) { 
    window.setTimeout(function() { 
     colorON(obj); 
    }, 500); 

    window.setTimeout(function() { 
     colorOFF(obj); 
    }, 1000); 
})(obj); 

Answer 2

함수를 호출했지만 참조를 지정하지 않았습니다! 따라서 코드가 즉시 실행되고 함수가 반환하는 값에 관계없이 setTimeout이 설정됩니다.

변화

window.setTimeout(colorON(obj),500); 
window.setTimeout(colorOFF(obj),1000); 

for(var i in thePattern){ 
    var obj = document.getElementById(thePattern[i]); 
    (function(obj) { 
     window.setTimeout(function(){colorON(obj);},500); 
     window.setTimeout(function(){colorOFF(obj);},1000); 
    })(obj); 
} 

코드에 어떻게 스위치 또는 객체와 함께 수행하는 방법을 보여주는 것은 논리/다른 경우

function colorON(obj) { 
    var color = ""; 
    switch (obj.id) { 
     case "red": 
      color = "#ff5555" 
      break; 
     case "blue": 
      color = "#5555ff" 
      break; 
     case "green": 
      color = "#88ff88" 
      break; 
     default: 
      color = "#ffffaa" 
    } 
    obj.style.background = color; 
} 

var colorsOff = { 
    "red": "#ff0000", 
     "blue": "#0000ff", 
     "green": "#22ff22", 
     "default": "#ffff00" 
} 



    function colorOFF(obj) { 
     var color = colorsOff[obj.id] || colors["default"]; 
     obj.style.backgroundColor = color; 
    } 


var thePattern = { 
    "one": "red", 
     "two": "blue", 
     "three": "green" 
} 


for (var i in thePattern) { 
    var obj = document.getElementById(thePattern[i]); 
    (function (obj) { 
     window.setTimeout(function() { 
      colorON(obj); 
     }, 500); 
     window.setTimeout(function() { 
      colorOFF(obj); 
     }, 1000); 
    })(obj); 
} 

없애 예 : http://jsfiddle.net/brjgc/