一个 for 循环可以等到其中的一个函数执行完毕吗？

Question

我正在构建一个西蒙游戏，并为每个新回合构建了一个函数：

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 循环时的动画和声音

var playButton = function(color){
  $("#"+color).addClass(color+"--active active", 300, function(){
     $("#audio-"+color).trigger('play');
     $("#"+color).removeClass(color+"--active active", 300)
});

现在，我的 for 循环只是一次性遍历所有动画和声音。如何让 for 循环等待 playButton 函数完成执行，然后再循环执行？

code sample on CodePen

Answer 1

您可以将您的 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
      });
    });
  }
}

Answer 2

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

因此，您可以按设定的时间间隔执行 playButton 函数。

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

}

然后增加 x。通过增加颜色，x 也会增加，因为它是通过引用传递的。

var playButton = function(color){
     $("#"+color).addClass(color+"--active active", 300, function(){
     $("#audio-"+color).trigger('play');
     $("#"+color).removeClass(color+"--active active", 300)
     color++;
});