SetInterval 函数正在播放音频两次而不是一次

Question

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

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

在调用超时之前你的计时器被触发两次。

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

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