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

它似乎正在做的是遍历整个for循环并启动所有计时器，然后所有计时器关闭得如此之快，以至于颜色似乎都没有闪烁。

有任何想法吗？ 非常感谢所有帮助。

---

现在它可以正确闪烁，并且盖子可以正常工作，但是同时可以闪烁所有颜色。 我尝试将闭包放在另一个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/