Comment démarrer un deuxième timer dans Vuex lorsque le premier timer expire ?

Question

J'ai un projet Vue avec le statut suivant dans le stockage Vuex :

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

Maintenant, en actions, j'ai ce qui suit :

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

        // 这将定时器设置为从5倒数到0
        await new Promise(resolve => setTimeout(resolve, 1000));
        if (state.counter)
          state.gameStartTimer--;

        // if语句确保在gameStartTimer达到0时获取nowTime
        if (state.gameStartTimer == 0) {
          let timeNow = new Date().getTime();
          state.nowTime = timeNow;
        }
      }
      state.counter = false;

      // 我想在这里启动第二个定时器，每秒倒计时一次，直到randomNumber状态达到0
        await new Promise(resolve => setTimeout(resolve, 1000));
        if (state.clickAlert)
          state.randomNumber--;

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

    },
}

Le problème auquel je suis confronté est que le premier chronomètre est enveloppé dans une boucle while, ce qui est exactement ce que je veux, pour que le jeu commence à 5 et compte à rebours jusqu'à 0.

Ensuite, je souhaite que le deuxième minuteur (en utilisant randomNumber comme durée) s'exécute en arrière-plan, puis définit l'état clickAlert sur true.

Cependant, je n'arrive pas à faire fonctionner le deuxième minuteur dans la méthode async/await. Je ne sais pas vraiment quel est le problème de syntaxe ou de logique.

Tous les conseils seraient grandement appréciés.

Answer 1

La solution évidente semble être de mettre également le deuxième minuteur dans une whileboucle.

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

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

async/await Juste une façon d'éviter les fonctions de rappel. Il est fonctionnellement équivalent au code suivant :

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