西蒙游戏javascript，我如何同步按钮的灯不踩在彼此与动画()和延迟()JQUERY

我正在做一个Simon游戏，我把不透明度从1到0.3，每次序列有位置时回到1。它几乎可以工作，但问题是当序列中有相同颜色的一行时。例如，GREEN, GREEN, RED, BLUE只显示一个绿色按钮和一个红色和一个蓝色按钮。这是时间的问题，因为逻辑工作正常。这是我的代码

$(document).ready(function(){

 let simon={
      colors:["green","red","yellow","blue"],
      sequence:[],
      userSequence:[],
      strict:false,
      buttonSounds : {},
      init: function(){
        let objectContext=this;

        $("#start").on("click",function(){
           objectContext.setSounds();

            //executes for the first time
  objectContext.emptyAllSequences();
           //I generate the first of the sequence
      objectContext.generateAndAddRandomColor();
           //I display the sequence on the board
      objectContext.displaySequenceOnBoard();

           }); 
          $("#title").addClass('tada animated');  
          $("#strict").on("click",function(){
            $(this).toggleClass("active");
            if($(this).hasClass("active")){
              objectContext.strict=true;
            }else{
              objectContext.strict=false;
            }
          });
       $(".button").on("click",function(){
            const color=$(this).attr("data-color");
           objectContext.lightButton(color,0);
            objectContext.userSequence.push(color);

            let isSequenceCorrect=objectContext.checkUserSequence();
       /*  console.log("sequenceCorrect "+isSequenceCorrect);
         console.log("sequence "+objectContext.sequence);
         console.log("user sequence "+objectContext.userSequence);
         console.log("user sec length "+objectContext.userSequence.length);
         console.log("sec length "+objectContext.sequence.length);*/
            if(objectContext.userSequence.length===objectContext.sequence.length || !isSequenceCorrect){
                if(isSequenceCorrect){
         setTimeout(function(){objectContext.generateAndAddRandomColor();
                  objectContext.displaySequenceOnBoard();
                  //reset the userSequence to check the whole sequence again 
                  objectContext.emptyUserSequence(); }, 1500);               
                }else{
                  //if strict mode is on
                  if(strict){
                    //user looses
                  $("#count").html("Lost");
                  //wipe sequence array
                   objectContext.emptyAllSequences();
                  $("#start").removeClass("active");
                  }else{
                    setTimeout(function(){
               //change this to generate another sequence instead of displaying the existent       
                  objectContext.displaySequenceOnBoard();
                  //reset the userSequence to check the whole sequence again 
                  objectContext.emptyUserSequence(); }, 1500);        

                  }
                }
            }
     });
  },
      setSounds:function(){
        this.buttonSounds["green"] = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3");
        this.buttonSounds["red"] = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3");
        this.buttonSounds["yellow"] = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3");
        this.buttonSounds["blue"] = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");
      },
      emptyUserSequence: function(){
            this.userSequence.length=0;
      },
      emptyAISequence: function(){
               this.sequence.length=0;
      },
      emptyAllSequences:function(){
        this.emptyUserSequence();
        this.emptyAISequence();
      },
      updateCount: function(){
        $("#count").html(this.sequence.length);
      },
      checkUserSequence:function(){
        for(let i=0,len=this.userSequence.length;i<len;i++){
          if(this.userSequence[i]!== this.sequence[i]){
            return false;
          }
        }

        return true;    
      },
      generateAndAddRandomColor:function(){
        const randColorIndex=Math.floor(Math.random()*4);

        const randColor=this.colors[randColorIndex];
        this.sequence.push(randColor);
        this.updateCount(); 
      },
      displaySequenceOnBoard: function(){
        for(let i=0,len=this.sequence.length;i<len;i++){
          // this.buttonSounds[this.sequence[i]].play();
           this.lightButton(this.sequence[i],i);

        }//end for
      },
      lightButton: function(color,i){
        var objectContext=this;
                     $("#"+color).delay(400*i) 
        .animate({opacity : 0.3}, 300,function(){
                objectContext.buttonSounds[color].play();
                  $("#"+color).animate({opacity : 1}, 150);

                });

      }
    }
 simon.init();
});

这是依存关系。你必须按下开始键才能开始游戏，当序列增长并显示在棋盘上时，之前评论的问题出现了，可能会发生什么?谢谢!

http://codepen.io/juanf03/pen/jrEdWz?编辑= 1111