Javascript for循环是否可以等到其中的函数完成执行？

我正在构建一个Simon游戏，并为每一轮新游戏构建了一个函数：

var game = [];
var squares = ["green", "red", "blue", "yellow"];

var newRound = function() {
  // adds a new round to the end of the game array
  game.push(squares[Math.floor(Math.random() * squares.length)]);

  // for loop to run through the game array
  for (var x = 0; x < game.length; x++) {
    playButton(game[x]);
  }
}

现在，我的for循环只需一次遍历所有动画和声音。如何使for循环在再次循环之前等待playButton函数完成执行

---

您可以将for循环转换为一个递归函数，该函数播放当前按钮，然后在所有动画完成后尝试播放下一个按钮。比如：

var newRound = function() {
  // adds a new round to the end of the game array
  game.push(squares[Math.floor(Math.random() * squares.length)]);

  // start playing from the first button
  playButton(game, 0);
}

function playButton(game, index) {
  if (index < game.length) { // if this button exists, play it
    var color = game[index];
    $("#" + color).addClass(color + "--active active", 300, function() {
      $("#audio-" + color).trigger('play');
      $("#" + color).removeClass(color + "--active active", 300, function() {
        playButton(game, index + 1); // once this button was played, try to play the next button
      });
    });
  }
}

var newRound=function（）{
//将新回合添加到游戏阵列的末尾
game.push（方块[Math.floor（Math.random（）*squares.length）]；
//从第一个按钮开始播放
播放按钮（游戏，0）；
}
功能播放按钮（游戏、索引）{
如果（index

您可以将for循环转换为一个递归函数，该函数播放当前按钮，然后在所有动画完成后尝试播放下一个按钮。比如：

var newRound = function() {
  // adds a new round to the end of the game array
  game.push(squares[Math.floor(Math.random() * squares.length)]);

  // start playing from the first button
  playButton(game, 0);
}

function playButton(game, index) {
  if (index < game.length) { // if this button exists, play it
    var color = game[index];
    $("#" + color).addClass(color + "--active active", 300, function() {
      $("#audio-" + color).trigger('play');
      $("#" + color).removeClass(color + "--active active", 300, function() {
        playButton(game, index + 1); // once this button was played, try to play the next button
      });
    });
  }
}

var newRound=function（）{
//将新回合添加到游戏阵列的末尾
game.push（方块[Math.floor（Math.random（）*squares.length）]；
//从第一个按钮开始播放
播放按钮（游戏，0）；
}
功能播放按钮（游戏、索引）{
如果（index

Javascript是单线程的，所以您所要求的已经发生了。但是，您的DOM不会更新，因为有时您的DOM元素不存在。DOM更新与javascript不同步

因此，您可以按设定的时间间隔执行

playButton

功能

if(x<game.length) {
   setInterval(playButton(x), <someSmallNumber like 0.2 milliseconds>);

}

---

Javascript是单线程的，所以您所要求的已经发生了。但是，您的DOM不会更新，因为有时您的DOM元素不存在。DOM更新与javascript不同步

因此，您可以按设定的时间间隔执行

playButton

功能

if(x<game.length) {
   setInterval(playButton(x), <someSmallNumber like 0.2 milliseconds>);

}

---

$（“#”+color）.removeClass（color+“--active-active”，300）

参数

300

的意思是什么？@AndrewEvt我猜它在ms@AndrewEvt“决定动画运行时间的字符串或数字。”伙计们，我们是在看同一页吗@安德烈，没有

$（“#”+color）。移除类（color+“--active-active”，300）

参数

300

的意思是什么？@AndrewEvt我猜它在ms@AndrewEvt“决定动画运行时间的字符串或数字。”伙计们，我们是在看同一页吗@安德烈，没有。通过增加颜色，x会增加，这是不正确的。JS是如此

color

包含

x

值的副本，更新它不会影响

x

。通过增加color，x会增加，这是不正确的。JS是如此的

color

包含

x

值的副本，更新它不会影响

x

。这是一个很好的解决方案，谢谢。一个奇怪的错误发生了，当一个按钮连续按下两次时，声音只会第一次播放。我将毫秒数增加到400毫秒，但这种情况不再发生。知道为什么吗？没问题，很乐意帮忙。至于您的问题，您需要决定如何处理允许用户在设置动画时单击对象的问题。如果要在动画进行时忽略它们的单击，一个简单的解决方法是添加一个标记，例如，

isAnimating

，该标记被初始化为

false

。然后，在

中单击
处理程序，如果此标志为
false
，则启动动画，然后将该标志设置为
true
，动画完成后，将其设置回
false
。这将确保用户不能用一堆点击来启动一堆动画：）这是一个很好的解决方案，谢谢。一个奇怪的错误发生了，当一个按钮连续按下两次时，声音只会第一次播放。我将毫秒数增加到400毫秒，但这种情况不再发生。知道为什么吗？没问题，很乐意帮忙。至于您的问题，您需要决定如何处理允许用户在设置动画时单击对象的问题。如果要在动画进行时忽略它们的单击，一个简单的解决方法是添加一个标记，例如，
isAnimating
，该标记被初始化为
false
。然后，在
中单击
处理程序，如果此标志为
false
，则启动动画，然后将该标志设置为
true
，动画完成后，将其设置回
false
。这将确保用户不能通过一系列单击来启动一系列动画：）