如何在Javascript For循環中的每次迭代之間增加延遲

Question

我正在為FreeCodeCamp創建一個Simon游戲，並且嘗試使用for循環為每個模式片段播放音頻。

我現在擁有的代碼可以一次播放所有音頻，而這不適用於游戲。 如何更改此代碼，以使其在間隔0.5秒的時間內分別播放每種音頻？

這是播放音頻並增加視覺效果的功能

function playAudio() {
    if (colorColor === "red") {
      red.play();
      $('#red').effect("highlight", { color: colorColor }, 500);
    } else if (colorColor === "blue") {
      blue.play();
      $('#blue').effect("highlight", { color: colorColor }, 500);
    } else if (colorColor === "green") {
      green.play();
      $('#green').effect("highlight", { color: colorColor }, 500);
    } else if (colorColor === "yellow") {
      yellow.play();
      $('#yellow').effect("highlight", { color: colorColor }, 500);
    }
}

我認為這是問題所在。

function playPattern() {
    for (var i = 0; i < pattern.length; i++) {
      colorColor = pattern[i];
      setTimeout(playAudio, 500);
    }
  setTimeout(random, 750);
}

這是random（）函數，僅是因為它在playPattern（）中被調用

function random() {
    randomColor = colors[Math.floor(Math.random() * colors.length)];
    colorColor = randomColor;
    colorColor = colorColor.slice(1);
    pattern.push(colorColor);

    count++;
    if (count < 10) {
      document.getElementById("count").innerHTML = "0" + count;
    } else {
      document.getElementById("count").innerHTML = count;
    }

    playAudio();

    pickCount = 0;
    userPick = [];
}

謝謝！

Answer 1

假設您的音頻長度相同：

var audioLength = 3000; // length of audio in ms

for (var i = 0; i < pattern.length; i++) {
  colorColor = pattern[i];
  setTimeout(playAudio, (i * (audioLength + 500));
}

Answer 2

在您正在執行的代碼中：

for (var i = 0; i < pattern.length; i++) {
  colorColor = pattern[i];
  setTimeout(playAudio, 500);
}

發生的事情是，您基本上定義了對所有模式在500ms內運行playAudio 。 將立即處理for循環，然后在500毫秒后一起播放所有音頻。

您想要的是僅在playAudio函數結束時才調用下一個超時。

let i = 0;
function playAudio() {
    i++;
    colorColor = pattern[i];
    if (colorColor === "red") {
      red.play();
      $('#red').effect("highlight", { color: colorColor }, 500);
    } else if (colorColor === "blue") {
      blue.play();
      $('#blue').effect("highlight", { color: colorColor }, 500);
    } else if (colorColor === "green") {
      green.play();
      $('#green').effect("highlight", { color: colorColor }, 500);
    } else if (colorColor === "yellow") {
      yellow.play();
      $('#yellow').effect("highlight", { color: colorColor }, 500);
    }
    if (i < pattern.length) {
        setTimeout(playAudio, 500);
    }
}

function random() {
    randomColor = colors[Math.floor(Math.random() * colors.length)];
    colorColor = randomColor;
    colorColor = colorColor.slice(1);
    pattern.push(colorColor);

    count++;
    if (count < 10) {
      document.getElementById("count").innerHTML = "0" + count;
    } else {
      document.getElementById("count").innerHTML = count;
    }

    playAudio();

    pickCount = 0;
    userPick = [];
}

setTimeout(random, 750);

Answer 3

我以這個答案為基礎 。

我所做的是通過創建一個預加載音頻文件object與標題密鑰和與它包含文件的來源，如果它已經加載的對象值：

const notes = ['do', 're', 'mi', 'fa', 'sol', 'la', 'ti'];
const audioFiles = notes.reduce((obj, title) => {
  obj[title] = {
    src: `notes/${title}.wav`,
    loaded: false,
  };

  return obj;
}, {});

// Preload files.
Object.entries(audioFiles).forEach(([title, details]) => {
  const audio = new Audio();

  audio.addEventListener('canplaythrough', () => {
    details.loaded = true;
  });

  audio.src = details.src;
});

playPlaylist函數獲取一個播放列表（標題數組）和一個包含音頻文件的對象：

const playAudio = function playAudio(player, src) {
  player.src = src;
  player.play();
};

const playPlaylist = function playPlaylist(playlist, files) {
  // TODO: Check if files in playlist are already loaded.
  // while (!filesLoaded) { ... }

  const player = new Audio();
  let audioIndex = 0;

  player.addEventListener('ended', () => {
    audioIndex++;

    if (audioIndex >= playlist.length) {
      return;
    }

    setTimeout(() => {
      playAudio(player, files[playlist[audioIndex]].src);
    }, 500);
  });

  playAudio(player, files[playlist[audioIndex]].src);
};

然后只需提供播放列表並傳遞audioFiles對象即可。

// Play sample playlist.
const playlist = 'do,mi,fa,sol,do,re,la,fa,mi'.split(',');
playPlaylist(playlist, audioFiles);

只需更改文件和文件路徑即可進行測試。

Answer 4

您需要考慮歌曲的持續時間，並將其包括在超時中，例如，如果紅色持續1分鍾，則需要將下一個超時設置為setTimeout(blue, 60*1000 + 500) ，如下所示：

function playAudio(color) {
    if (colorColor === "red") {
      red.play();
      $('#red').effect("highlight", { color: colorColor }, 500);
      setTimeout(function () {
         playAudio("blue");
      },60*1000 + 500);
    } else if (colorColor === "blue") {
      blue.play();
      $('#blue').effect("highlight", { color: colorColor }, 500);
      setTimeout(function () {
         playAudio("green");
      },60*1000 + 500);
    } else if (colorColor === "green") {
    //.... ETC

您不需要for，只需進行一些遞歸