西蒙游戏javascript，如何使按钮的灯与animation（）和delay（）JQUERY同步不相互踩踏？

Question

我正在做一个西蒙游戏，我将不透明度从 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?editors=1111

Answer 1

您同时在同一个元素上设置多个延迟，而最新的只是替换现有的。

不要使用延迟，而是将complete 函数与您的动画一起传递，并为其提供整个剩余序列。为了说明，将您当前的displaySequenceOnBoard() 替换为这两个函数：

  displaySequenceOnBoard: function(){
    $(".button").removeClass("enabled");
    this.lightButtonsInSequence(this.sequence);

  },

  lightButtonsInSequence: function(sequence) {
    var color = sequence[0]
    var remainingSequence = sequence.slice(1)
    var lightNextButtonFunction = remainingSequence.length > 0 ? jQuery.proxy(function(){
                this.lightButtonsInSequence(sequence.slice(1));
              }, this) : null;
    console.log("Lighting color: " + color);
    $("#"+color).animate({opacity : .3}, 300).animate({opacity : 1}, 150, lightNextButtonFunction)

  }

它已插入您的 CodePen 和 working。