javascript - 数组中的项目推送超出了需要的数量

Question

我有一些 jQuery:

    $("#pink").click(function() {
        user_seq.push(1);
    });
    $("#blue").click(function() {
        user_seq.push(2);
    });
    $("#yellow").click(function() {
        user_seq.push(3);
    });
    $("#green").click(function() {
        user_seq.push(4);
    });

例如，如果用户单击 #blue、#yellow 和 #green，我希望它推送到数组[2,3,4]。

然后，如果数组长度与另一个数组的长度匹配，则该数组清空，并再次开始相同的过程。

但是，当我对数组进行 console.log 时，在第一轮之后的每一轮新一轮中，其中的值都会被推送比需要的次数更多的次数。这是控制台日志的样子，用户序列应该与计算机序列匹配:

最终目标是比较两个数组，如果它们匹配，则向游戏添加另一个步骤。这是fiddle 。单击绿色小圆圈开始游戏/继续添加回合。

整个JS在这里，最后一部分(function check())我还没有使用过:

/***************
* Presets
***************/
var round = 0; 
var user_count = 0; //how many times the player has pressed a button
var strict = false; //strict mode on/off
var user_seq = []; //the order the player has pressed the buttons
var right_seq = []; //the right sequence of presses

/*************
* Start Game
*************/
$("#start").click(function() {
    //strict mode on
    $("#strict").click(function() {
        $(this).addClass("disabled");
        strict = true;
    });   

    gen_sequence();
})

/****************************
* Generate a random sequence
****************************/
function gen_sequence() {
    round++;
    $("#round-text").text(round); //display round number

    var n = Math.floor(Math.random() * 4) + 1; //generate a random number from 1-4
    right_seq.push(n); //push the number to the sequence array
    show_sequence();
};

/***********************
* Display the sequence
***********************/
function show_sequence() {
  var k = right_seq.length;

  //assign each button a number
  //when the loop goes over it that button's animation plays
  (function animation(i) {
    if (i >= right_seq.length) {
      return;
    }
    setTimeout(function() {
      if (right_seq[i] == 1) {
        setTimeout(function() {
          TweenMax.from("#pink", 2, {opacity: 0.8, scale: 0.2, ease: Elastic.easeOut});
          one.play();
        }, 1000);
      } else if (right_seq[i] == 2) {
        setTimeout(function() {
          TweenMax.from("#blue", 2, {opacity: 0.8, scale: 0.2, ease: Elastic.easeOut});
          two.play();
        }, 1000);
      } else if (right_seq[i] == 3) {
        setTimeout(function() {
          TweenMax.from("#yellow", 2, {opacity: 0.8, scale: 0.2, ease: Elastic.easeOut});
          three.play();
        }, 1000);
      } else {
        setTimeout(function() {
          TweenMax.from("#green", 2, {opacity: 0.8, scale: 0.2, ease: Elastic.easeOut});
          four.play();
        }, 1000);
      }; //end for loop
      animation(++i);
    }, 500);
  })(0);

    user_input();
}


/********************
* User sequence
********************/
//what the user inputs after seeing the sequence play out
//on each click the count goes up
//the number of the button is pushed to the user's array to be compared with the correct sequence
function user_input() {
    $("#pink").click(function() {
        user_seq.push(1);
    });
    $("#blue").click(function() {
        user_seq.push(2);
    });
    $("#yellow").click(function() {
        user_seq.push(3);
    });
    $("#green").click(function() {
        user_seq.push(4);
    });

    console.log("computer: " + right_seq);
    console.log("user: " + user_seq);

};

/**************************************************
* Check if user's sequence matches the correct one
**************************************************/
function check() {

    if (right_seq.length === user_seq.length && user_seq === right_seq) {
        if (round <= 20) {
            //display message
            user_seq = [];
            right_seq = [];
            gen_sequence();
            $(".circle").removeClass("disabled");
        } else {
            //display message
            //instructions to restart game
        }
    } else if (strict = true) {
        round = 0;
        user_seq = [];
        real_seq = [];
        //display message
    } else {
        show_sequence();
    }

}

Answer 1

看起来你的 show_sequence 函数正在运行 user_input ，它在每次调用时向每个按钮添加一个新的单击处理程序。由于每次显示模式时都会运行 show_sequence，因此每次新一轮都意味着额外的单击处理程序以及按下按钮时的额外插入。

要查看此操作(在 Chrome 中)，请检查其中一个按钮，然后在“元素”选项卡中单击右侧面板上的“事件监听器”。如果您打开“点击下拉列表”，您应该能够看到当前分配的所有点击监听器。当你开始新一轮时，将会添加越来越多的听众，这就是你的问题的原因。

我建议仅在页面加载时调用 user_input 以避免这种情况。