如何在 Vuex 中第一个计时器到期后启动第二个计时器？

Question

我有一个 Vue 项目，在 Vuex 商店中我有这些状态：

state: {
  gameStartTimer: 5,
  counter: false,
  randomNumber: Number,
  clickAlert: false
}

现在，在 actions 中，我有以下内容：

actions: {
    async startCounter({ state }) {
      state.counter = true;
      state.clickAlert = false;
      while (state.gameStartTimer > 0 && state.counter) {

        // this sets the timer to count down from 5 to 0
        await new Promise(resolve => setTimeout(resolve, 1000));
        if (state.counter)
          state.gameStartTimer--;

        // the if-statement ensures nowTime is acquired upon gameStartTimer reaches 0
        if (state.gameStartTimer == 0) {
          let timeNow = new Date().getTime();
          state.nowTime = timeNow;
        }
      }
      state.counter = false;

      // I want to start a second timer here which counts down every second 
      // until the randomNumber state reaches 0
        await new Promise(resolve => setTimeout(resolve, 1000));
        if (state.clickAlert)
          state.randomNumber--;

        if (state.randomNumber == 0) {
          state.clickAlert = true;
        }
      }

    },
}

我面临的问题是第一个计时器被包裹在一个 while 循环中，这正是我想要的，这样游戏就从 5 开始倒计时到 0。

然后，我想要第二个计时器（randomNumber用于持续时间）在后台运行，然后将clickAlert状态设置为true。

但是，我无法在 async/await 方法中让第二个计时器达到运行。我不太确定语法或逻辑问题是什么。

如有任何提示，我们将不胜感激。

Answer 1

显而易见的解决方案似乎是将第二个计时器也包装在 while 循环中。

while (state.randomNumber > 0) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    state.randomNumber--;

    if (state.randomNumber === 0) {
        state.clickAlert = true;
    }
}

async/await 只是一种避免回调函数的方法。它在功能上等同于：

while (state.randomNumber > 0) {
    setTimeout(() => {
        state.randomNumber--;
    }, 1000);
}

如何在 Vuex 中第一个计时器到期后启动第二个计时器？

How to start a second timer after the first timer expires in Vuex?

javascript

promise

async-await

vue.js

vuex