JavaScript中的Simon Game

Question

this is a javascript problem. So this is what I did. I created 2 arrays. 1 for the computer and one for the player. In the computerTurn function The computer creates a random number and places it into an array. It will output the number from the array which will play a button. If the counter equals the length of the array then it will switch to the players turn. In the playerTurn function the player has 5 seconds to follow the buttons that the computer chose. The problem occurs after the second round when there are 2 random elements in the array. For some reason it doesn't clear my playerArray and just adds up numbers to it. What am I doing wrong?

The project can be found here: https://codepen.io/roger1891/full/vmYqwx/

I assume the problem lies here:

var playerTurn = function() {
    if(currentPlayerTurn == "human" && onGoingGame == false) {
    playerArray = [];
    $(".my-btn").click(function(){
       var $input = $(this);
       var attrString = $input.attr("id");
       //only get number from id attribute
       var strNum = attrString.replace( /^\D+/g, '');
       //convert theNumber from string to number
       var theNum = parseInt(strNum);
       playerArray.push(theNum);
       console.log("this is the num the player picked " + theNum);
       console.log(playerArray);
    });  


    setTimeout(function () {
         var is_same = playerArray.length == sequenceArray.length && playerArray.every(function(element, index) {
          return element === sequenceArray[index]; 
        });
        is_same;
        console.log(is_same);
        if(is_same == true) {
          onGoingGame = true;
          currentPlayerTurn = "computer";
          computerTurn();

        }   

    }, 5000);

    }  
} 
    setTimeout(function () {
             var is_same = playerArray.length == sequenceArray.length && playerArray.every(function(element, index) {
              return element === sequenceArray[index]; 
            });
            is_same;
            console.log(is_same);
            if(is_same == true) {
              onGoingGame = true;
              currentPlayerTurn = "computer";
              computerTurn();

            }   

        }, 5000);

        }  
      } 

Answer 1

The main issue is that you should not define the click handler within a function that gets called several times ( playerTurn ), since that will accumulate the click handlers that will be executed at a single click. As a consequence there is a growing increase in the length of playerArray . Instead define the click handler outside that function, and repeat the condition in that click handler like you have in playerTurn :

$(".my-btn").click(function(){
    if(currentPlayerTurn != "human" || onGoingGame) return; // exit
    // rest of the click handler...
});  

var playerTurn = function() {
    if(currentPlayerTurn != "human" || onGoingGame) return; // exit
    playerArray = [];
    setTimeout(function () {
        // etc....
    }, 5000);
}

// ... etc

NB: The variable onGoingGame seems unnecessary, as it always corresponds to the expression currentPlayerTurn == "computer"