在具有 if/else 语句的 for 循环中延迟迭代

Question

我正在尝试制作一款 Simon Says 游戏。我有一个遍历数字数组的函数。每个数字都与一个动作相关联（因此相应的按钮动画）。当序列只有 1 个值长时，这很好用，但它们都只是一次播放。我已经查找了在迭代之间延迟的方法，但没有发现包含 if/else 语句的 for 循环。

我尝试了一个我找到的解决方案here：

function show_sequence() {
    var k = right_seq.length;

    //assign each button a number
    //when the loop goes over it that button's animation plays
    (function animation(i) {
            setTimeout(function() {
            if (i == 1) { 
                setTimeout(function() {
                    TweenMax.from("#pink", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut});
                    one.play();
                }, 1000);
            } else if (i == 2) {
                setTimeout(function() {
                    TweenMax.from("#blue", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut});
                    two.play();
                }, 1000);
            } else if (i == 3) {
                setTimeout(function() {
                    TweenMax.from("#yellow", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut});
                    three.play();
                }, 1000);
            } else {
                setTimeout(function() {
                    TweenMax.from("#green", 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut});
                    four.play();
                }, 1000);
            }; //end for loop
            if (--i) {
                animation(i);
            }
        }, 200);
})(k);
}

它的工作原理是在动画和声音之间添加延迟，但不会以正确的顺序播放它们。例如，如果数组是 [3, 4, 1, 2] 它不会将动画放置在这些按钮上，而是按 [4, 3, 2, 1] 的顺序放置，并且它不会工作超过 4 轮.

这里是fiddle，但游戏还没有结束，所以我不知道它是否有帮助。按绿色小圆圈开始/继续添加回合。

Answer 1

不要使用所有这些计时器，而是使用staggerFrom 方法，它会为您完成延迟。要从 right_seq 数组生成系列，将该数组转换为元素名称列表：

function show_sequence() {
    var k = right_seq.length;
    var circles = right_seq.map(function (num) {
        return ['#pink','#blue','#yellow','#green'][num-1];
    });
    // this will apply the animation in sequence
    TweenMax.staggerFrom(circles, 0.6, {opacity:0.3, scale:0.8, ease:Elastic.easeOut}, 0.6);
}

现在您有了这个，您可能需要查看动画本身，因为此方法会立即将所有受影响的元素设置为其初始样式，但会以“交错”延迟执行动画。

如果这不起作用，请使用 onComplete 属性实现循环：

function show_sequence() {
    var circles = right_seq.map(function (num) {
        return ['#pink','#blue','#yellow','#green'][num-1];
    });
    (function loop(i) {
        if (i>=circles.length) return;
        TweenMax.from(circles[i], 0.6, {
            opacity:0.3, scale:0.8, ease:Elastic.easeOut, 
            onComplete: loop.bind(this,i+1)
        });
    })(0);
}

Answer 2

这是一个快速修复。您可以做很多事情来改善它，但这应该可以帮助您克服当前的障碍。

问题是您根本没有使用您的序列。您传递给 show_sequence 的数字只是数组的长度 - 您正在递减（这是 4、3、2、1 的来源）。你从来没有真正从你的序列数组中得到按钮索引

function show_sequence() {
  var k = right_seq.length;

  //assign each button a number
  //when the loop goes over it that button's animation plays
  (function animation(i) {
    if (i >= right_seq.length) {
      return;
    }
    setTimeout(function() {
      if (right_seq[i] == 1) {
        setTimeout(function() {
          TweenMax.from("#pink", 0.6, {
            opacity: 0.3,
            scale: 0.8,
            ease: Elastic.easeOut
          });
          one.play();
        }, 1000);
      } else if (right_seq[i] == 2) {
        setTimeout(function() {
          TweenMax.from("#blue", 0.6, {
            opacity: 0.3,
            scale: 0.8,
            ease: Elastic.easeOut
          });
          two.play();
        }, 1000);
      } else if (right_seq[i] == 3) {
        setTimeout(function() {
          TweenMax.from("#yellow", 0.6, {
            opacity: 0.3,
            scale: 0.8,
            ease: Elastic.easeOut
          });
          three.play();
        }, 1000);
      } else {
        setTimeout(function() {
          TweenMax.from("#green", 0.6, {
            opacity: 0.3,
            scale: 0.8,
            ease: Elastic.easeOut
          });
          four.play();
        }, 1000);
      }; //end for loop
      animation(++i);
    }, 200);
  })(0);
}