Javascript时间播放哔哔声

Question

我正在构建一个将在HTML5 / Javascript中播放声音的网格，基本上我希望它通过循环继续重复，所以我设置：

window.setInterval(playMusic,INTERVAL);

到目前为止，这一切都很好，但是当我尝试在每列上添加setTimeout事件时：

  function playMusic(){
    for(var i=0;i<GRID_SIZE;i++){
      setTimeout(playCol(i),INTERVAL/GRID_SIZE*i);
    }
  }

我这样做的原因是，从左到右，它将以增量一个接一个地播放声音。在开发者控制台中，我可以看到各个计时器事件在正确的时间触发，但声音没有被播放。然后在间隔结束时所有声音同时播放。所以我不明白为什么每个嘟嘟声都不像我想要的那样一个接一个地播放。 setInterval是否会停止运行每个超时的代码，直到间隔结束？如果是这样的话，我可以在正确的时间获得哔哔声吗？

Answer 1

你可以让你的playMusic成为一个递归函数，让你的计数器在外面：

var i = 0;

function playMusic(){
    if( i < GRID_SIZE ){
        playCol(i);
        i++;
        setTimeout( playMusic, INTERVAL/GRID_SIZE );
    }
}

这样，playMusic（）函数将一直调用自己，直到if条件为false。 i 变量已更新，将用于为 playCol 功能选择不同的声音。