SetInterval Funktion spielt Audio zweimal statt

Question

Ich bin in einem seltsamen Problem läuft, ich baue ein Simon sagt Spiel für freecodecamp, aber jedes Mal, wenn ich die Funktion unten laufen es spielt das Audio zweimal. obwohl ich die Funktion nur einmal anrufe, irgendwelche Ideen?

change('#8B0000','#E8A5A5','1000','1000','#2'); 
    var redSound = new 
    Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"); 
    var blueSound = new 
Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"); 
var greenSound = new Audio 
("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"); 
var yellowSound = new Audio 
("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"); 


function change(color1, color2,c1,c2,button){ 
    console.log("Inside Start of function"); 
var timer = setInterval(function first_color() { 
    $(button).css('background',color2); 
if(color2 == '#34d955'){ 
    greenSound.play() 
    } else if(color2 == '#E8A5A5'){ 
    redSound.play() 
    } else if(color2 =='#F3FEA5'){ 
     yellowSound.play(); 
    }else if(color2 == '#A5DEFE'){ 
     blueSound.play() 
    } 

    setTimeout(change_color, c2); 
}, c1);// 
function change_color() { 
    $(button).css('background',color1); 
    clearInterval(timer); 
    } 

Answer 1

Wahrscheinlichkeiten sind Ihr Timer wird zweimal ausgelöst, bevor Ihr Timeout aufgerufen wird.

Innerhalb Ihres Intervalls verfolgen Sie, welcher Sound abgespielt wird, und kehren Sie zurück, wenn Sie die Methode zum Abspielen des Sounds bereits aufgerufen haben.

var playing = null; 
function change(color1, color2, c1, c2, button) { 
    console.log("Inside Start of function"); 
    var timer = setInterval(function first_color() { 
     if (playing == color2) return; 
     playing = color2; 
     $(button).css('background', color2); 
     if (color2 == '#34d955') { 
       greenSound.play() 
     } else if (color2 == '#E8A5A5') { 
      redSound.play() 
     } else if (color2 == '#F3FEA5') { 
      yellowSound.play(); 
     } else if (color2 == '#A5DEFE') { 
      blueSound.play() 
     } 

     setTimeout(change_color, c2); 
    }, c1);// 
    function change_color() { 
     $(button).css('background', color1); 
     clearInterval(timer); 
    }