Function SetInterval功能是播放音频两次，而不是一次

我遇到了一个wierd问题，我正在为freecodecamp构建一个simon says游戏，但每次我运行下面的函数时，它都会播放两次音频。即使我只调用了一次函数，有什么想法吗

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

---

在调用超时之前，计时器可能会被触发两次

在间隔时间内，跟踪正在播放的声音，如果已经调用了播放声音的方法，则返回

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

---

你完全正确，在2秒钟的时间内，循环播放了两次，我能够缩短到500毫秒，效果很好，谢谢你。您可以投票并将此答案标记为正确，以便遇到此问题并遇到相同问题的其他人了解问题以及如何解决问题。