1

私はゲームのサイモンを HTML/JS でコーディングしようとしていますが、ゲームがシーケンスをフラッシュする部分を除いてすべて機能しているため、新しいシーケンスが何であるかがわかります。基本的に私が持っているものは次のとおりです。

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が、それは他の問題を引き起こします。

あなたの助けに感謝します。

4

2 に答える 2

7

次の関数を渡す必要があります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);
于 2013-05-13T17:32:14.430 に答える
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/

于 2013-05-13T17:32:08.577 に答える