延迟西蒙游戏的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);
      }
  }

延迟西蒙游戏的for循环

Delay in for loop for Simon game

delay

settimeout

reactjs