功能问题，点击多次点击（）多次

Question

我有一个项目的问题，我正在做; https://codepen.io/argestis/pen/gLraBq?editors=0001

我有一个功能，那就是一个西蒙说的游戏。到目前为止，我想将颜色值推入数组，然后将该数组与该函数进行比较。一切工作，直到我清空我用来推送用户应该从GIU输入的值的数组的值，当我回到功能GameOn()，我尝试开始推动多次点击触发值。

以下是参考函数，但在上面共享的codepen的控制台上，您可以看到我收到的错误。

function gameOn() { 
    game.blue.on("click", function() { 

     game.guessWhat.push(1); 
     console.log("I were at blue") 
     if (game.guessWhat.length !== game.count.length) { 

     } else { 
      verifySequence(); 
     } 

    }); 

    game.red.on("click", function() { 
     console.log("I were at red") 
     game.guessWhat.push(2); 
     if (game.guessWhat.length !== game.count.length) { 

     } else { 
      verifySequence(); 
     } 
    }); 

    game.green.on("click", function() { 
     console.log("I were at green") 
     game.guessWhat.push(3); 
     if (game.guessWhat.length !== game.count.length) { 

     } else { 
      verifySequence(); 
     } 
    }); 

    game.yellow.on("click", function() { 
     console.log("I were at yellow") 
     game.guessWhat.push(4); 
     if (game.guessWhat.length !== game.count.length) { 

     } else { 
      verifySequence(); 
     } 


    }); 
} 

谢谢你的时间，伙计！

Answer 1

您注册多个调用verifySequence当在同一项目 'click' 事件（）。您可以点击注销登记之前就事件解决

//problem in verifySequence() 
 
function verifySequence() { 
 
... 
 
    if (verify) { 
 
    console.log("this is game.guessWhat: " + game.guessWhat); 
 
    //when you call nextRound() you register click event on the same item (multiple times) 
 
    nextRound(); 
 
    } else { 
 
    clearUser(); 
 
    } 
 
} 
 
} 
 

 

 
//making sure to unregister 'click' event before add one 
 
game.blue.off("click").on("click", function() { 
 
    ... 
 
}); 
 

 
game.red.off("click").on("click", function() { 
 
    ... 
 
}); 
 

 
game.green.off("click").on("click", function() { 
 
    ... 
 
}); 
 

 
game.yellow.off("click").on("click", function() { 
 
    ... 
 
});

Answer 2

塞尔吉奥。每次我清空数组中的值时，我都会调用函数gameOn（）。我正在推动新一轮的序列。但是当我点击一次任何按钮的按钮触发，直到与我用来比较西蒙序列的其他数组的长度相同。

function nextRound(){ 

game.guessWhat = []; 
game.count.push(Math.floor((Math.random() * 4) + 1)) 
console.log("this is game.count: " + game.count) 
console.log("this is game.guessWhat inside nextRound function: " + game.guessWhat) 
gameOn(); 

} 


function verifySequence(){ 

verify = true; 

console.log("this is game.guessWhat entering verifySequence function: " + game.guessWhat) 
    for(var i = 0; i < game.count.length; i++){ 
    if(game.count[i] !== game.guessWhat[i]){ 
     verify = false; 
    } 

    } 

if(verify == true){console.log("this is game.guessWhat: " + game.guessWhat); nextRound(); } 
else{clearUser();} 
} 

而这是游戏对象;

var game = { 
count : [], 
guessWhat : [], 
red : $("#red"), 
blue : $("#blue"), 
green : $("#green"), 
yellow : $("#yellow") 
}; 

Answer 3

总是绑定一次，在任何函数调用之外单击，并在ready（）上做好准备。 在当前的gameOn（）方法中，您会绑定click，因此可能会多次看到它被触发。从gameOn（）中移除它。

绑定点击如下，

$(document).ready(function(){ 
game.blue.on("click", function() { 

    game.guessWhat.push(1); 
    console.log("I were at blue") 
    if (game.guessWhat.length !== game.count.length) { 

    } else { 
     verifySequence(); 
    } 

}); 

game.red.on("click", function() { 
    console.log("I were at red") 
    game.guessWhat.push(2); 
    if (game.guessWhat.length !== game.count.length) { 

    } else { 
     verifySequence(); 
    } 


}); 

game.green.on("click", function() { 
    console.log("I were at green") 
    game.guessWhat.push(3); 
    if (game.guessWhat.length !== game.count.length) { 

    } else { 
     verifySequence(); 
    } 


}); 

game.yellow.on("click", function() { 
    console.log("I were at yellow") 
    game.guessWhat.push(4); 
    if (game.guessWhat.length !== game.count.length) { 

    } else { 
     verifySequence(); 
    } 
    }); 
});