javascript - 功能问题，多次触发 click()

Question

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

我有一个功能，那就是 simon says game。到目前为止，我想将颜色值插入一个数组，然后将该数组与该函数进行比较。一切正常，直到我清空我用来推送用户应该从 GIU 输入的值的数组的值，当我返回函数 GameOn() 并尝试开始推送时单击多次触发的值。

这是引用函数，但在我上面分享的代码笔的控制台上，你们可以看到我得到的错误。

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() 时，您在同一项目上注册了多个“点击”事件。您可以在注册之前取消注册点击事件以解决该问题

//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() {
  ...
});