西蒙遊戲的javascript，如何同步按鈕的燈不踩到對方動畫（）和延遲（）jQuery的？

Question

我做了西蒙的比賽，我走的不透明度爲1至0.3，返回1次，每次一個序列具有地方。它幾乎可以正常工作，但遇到問題的情況是在序列中連續出現相同的顏色。綠色，綠色，紅色，藍色例如只顯示一個綠色按鈕，一個紅色和一個藍色。這是一個時間問題，導致邏輯工作正常。這裏是我的代碼

$(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(); 
}); 

這是codepen。你必須按開始鍵開始遊戲，併爲序列的增長，並顯示在板之前評論的問題出現了，有什麼可能會發生？謝謝！

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。