西蒙游戏的for循环延迟答案

【问题标题】：Delay in for loop for Simon game西蒙游戏的for循环延迟
【发布时间】：2019-11-21 22:07:19
【问题描述】：

我是 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);
    }
  }

谢谢！！

【问题讨论】：

标签： reactjs settimeout delay

【解决方案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]

希望对你有帮助！

【讨论】：

感谢您的回复！这一切都对我有用，除了 pcSequence.pop() 正在从我的 pcSequence 状态中删除数字，我需要模式相同，直到他们获胜或退出，每轮将一个随机数 1-4 添加到数组中所有的动画都会再次播放，再加上新的。

【解决方案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);
      }
  }

【讨论】：