Javascript 和 HTML5 循环问题

Question

我正在尝试用 HTML5 创建一个简单的循环录制程序。我已经完成了一些基础知识，但我现在遇到的问题是，当我尝试递归播放音频时，它会在音频完成之前或之后不断触发该方法。

我尝试设置一个 setTimeout，但这只会让我感到困惑，因为我认为是一个正确的时间间隔，只会让我更加困惑。有人可以看一下这个吗？

您还可以找到活跃站点 http://rossb.byethost11.com/

        /*
         * finds duration of sound file in milliseconds
         */
        function getMasterDuration() {
          var sound = document.getElementById("session-1");
          var returnValue = sound.duration * 1000;
          return returnValue;
        }


        /*
         * called from the button
         */

        function playAllService() {
          //set up recursive loop to play sounds
          window.setInterval(recursivePlay, getMasterDuration);
        }

        function recursivePlay() {
            //play all sounds
            playAll();
            //set timeout until sound is done (?)
            setTimeout(recursivePlay, getMasterDuration);
          }
          /*
           * Finds all the recording sessions and plays them.
           */

        function playAll() {
          for (var i = 1; i <= numberOfSessions; i++) {
            play(i);
          }
        }

是的，我知道它需要清理。

感谢您的帮助!

编辑澄清:我希望它不间断地循环。像循环花瓣机或鼓机。

Answer 1

当您访问不带括号的函数时，您指的是该函数本身。因此，对 recursivePlay 的调用将返回以下内容:

function recursivePlay() {
  //play all sounds
  playAll();
  //set timeout until sound is done (?)
  setTimeout(recursivePlay, getMasterDuration);
}

这对于 setTimeout 的第一个参数来说是正确的，因为您希望函数在一段时间间隔后运行。

setTimeout 的第二个参数应该是一个数字(以毫秒为单位)。但是，您返回的是函数 getMasterDuration，而不是函数的结果。

要解决这个问题，只需在 getMasterDuration 中添加括号即可:

setTimeout(recursivePlay, getMasterDuration());