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