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.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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/awaitJuste une façon d'éviter les fonctions de rappel. Il est fonctionnellement équivalent au code suivant :while (state.randomNumber > 0) { setTimeout(() => { state.randomNumber--; }, 1000); }