javascript - 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 将引用 last 中的元素你的循环。要解决这个问题，您必须通过隐藏它来按值传递 obj:

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

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