for循環中的多setTimeout調用

Question

我想在HTML/JS中編寫遊戲Simon，它的全部工作，除了遊戲閃爍序列的部分，所以你知道新序列是什麼。基本上我有什麼是：

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

其中colorON和colorOFF是：

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

和代碼向您展示如何做一個開關或物體擺脫的if/else邏輯

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/