延迟Simon游戏的for循环

Question

我是React的新手，所以我可能没有使用最佳实践。我正在尝试构建此“ Simon Says”游戏，但我仍然想在每个for循环之间同时进行延迟，因为它们同时运行。我已经看过其他解决方案，但是它们似乎不适合我。我也尝试过使用setTimeout，但是延迟后只能立即播放所有动画。这是for循环，我想在两者之间有一个延迟：

  newRound() {
    this.setState({
        pcSequence: this.state.pcSequence.concat(
          Math.floor(Math.random() * 4) + 1)
      },() => {
        this.state.pcSequence.forEach(element =>
          this.startAnimations(element)
        );
      }
    );
  }

  startAnimations(element) {
    if (element == 1) {
      this.activeBtn1(0);
    } else if (element == 2) {
      this.activeBtn2(1);
    } else if (element == 3) {
      this.activeBtn3(2);
    } else if (element == 4) {
      this.activeBtn4(3);
    }
  }

谢谢！

Answer 1

[嗨，我喜欢您的问题并设法使其正常运行，我将在下面共享代码：

state = {
    pcSequence: [],
  }
  componentDidMount() {
    this.newRound();
  }

  newRound() {
    this.setState({
        pcSequence: [1,4,3,2]
      },() => this.startSequence()
    );
  }

  startSequence() {
    if (this.state.pcSequence.length > 0) {
      setTimeout(() => {
        this.startAnimations(this.state.pcSequence.pop());
        this.startSequence();
      }, 1000) // 1000ms === 1 second
    }
  }

  startAnimations(element) {
    if (element === 1) {
      console.log('element 1', element)
    } else if (element === 2) {
      console.log('element 2', element)
    } else if (element === 3) {
      console.log('element 3', element)
    } else if (element === 4) {
      console.log('element 4', element)
    }
  }

您每次要重置按钮并以更好的方式填充数组时，都可以调用this.newRound，您只用1项而不是4项填充数组，例如[1]或[4]

希望有帮助！

Answer 2

我在其他地方找到了帮助，并希望展示我的工作，以防其他任何人一起寻找类似的东西。我删除了for循环并使用了map：

  newRound() {
    this.setState({
        pcSequence: this.state.pcSequence.concat(
          Math.floor(Math.random() * 4) + 1),
          round: this.state.round + 1
      },() => {
        this.state.pcSequence.map((element,index)=> {
          setTimeout(() => {
            this.startAnimations(element);
          }, index * 1000);
        })
      }
    );
  }

  startAnimations(element) {

      if (element == 1) {
        this.activeBtn1(0);
      } else if (element == 2) {
        this.activeBtn2(1);
      } else if (element == 3) {
        this.activeBtn3(2);
      } else if (element == 4) {
        this.activeBtn4(3);
      }
  }